项目中,网页页脚的js实现方式

最近,项目中需要给每个页面加入页脚,也就是一个网站由某某某公司开发什么的把,如下图,实现功能:出现纵滚动条时,页脚在页面内容的最下面;不出现纵滚动条时,固定在窗口的最最下面


网上也有许多用CSS布局来实现页脚的,但是任然不够灵活,可能页面稍微变化下大小、比例、屏幕变化下分辨率什么的,这个CSS的布局可能就不起作用了,js才是万能的~

简单介绍下js设置页脚的形式

1、写一个共同的footer.jsp画面,可以用其他jsp去include

以下是我写的代码,其中红框位置是需要特别注意的地方:


2、需要调用footer.jsp的页面,如下截图

其中,重点部分用红框标出,实现步骤

(1)、include footer.jsp页脚,页脚初始化的时候调用setFooter()一次

(2)、在window大小变化,或者是滚动条滑动时,都会相应setFooter()方法

这样就可以实现动态设置页脚的位置了


3、实现GIF:


题外话

1、算出滚动条的宽度:

$("body").outerWidth() + ";" + $(window).width()

2、得到画面组件的各种宽、高:

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值