前端开发中,教你如何用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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180711A17RXC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券