这两天公司网页改版用到fullpage。js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档。
而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空,好尴尬的说
底部的页脚部分就是我要单独处理的部分,从网上搜了各种资料,总结了一下,个人觉着最简单的方法,写一篇文章以便以后查阅。
& lt; !——页脚及倒数第二屏的HTML——比;
& lt;身体data-spy=肮龆北?
& lt; div id=癲owebok”class=癱ontainer-fluid”比;
& lt; div类="节" id=跋乱桓觥北?
& lt; div类=敖膛伞北?
& lt; div类=" sectcenter4 "祝辞& lt;/div>
& lt;/div>
& lt; div类=敖膛蓅ectbg2”比;
& lt; div类="容器"比;
& lt; div类=" sectcenter5 "祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类="部分页脚"祝辞& lt;页脚类=耙辰拧眎d=耙辰拧弊４? lt;/footer> & lt;/div>
& lt;/div>
& lt;/body>
//初始化滚屏的一些内容,最重要的是设置好锚点,这里重点是最后一屏(页脚)的锚点footerl
$ (' # dowebok ') .fullpage ({
verticalcenter:假的,
调整:没错,
导航:没错,
主持人:(第一节,第二节,‘lastScreen’,‘footerl’),
});
写完这些,实现的就是下面如图的效果,整个页脚占了一屏,并且是垂直居中显示的。
根据要实现的效果,要做的就是让页脚紧挨着#下这一屏(不垂直居中)+到#下这一屏的时候,再往下的滚动距离就不能是一屏了(必须是页脚的高度)。
按着整个思路,先解决css的问题
.section。页脚.fp-tableCell{//修改最后一屏显示属性
显示:块!重要;
｝//实现页脚紧挨着#下这一屏显示,底部出现
下面修改fullpage.js的问题,在引用的fullpage.js文件中找到performMovement这个方法,按照如下方法,修改一下,就可以达到想要的效果(页脚紧挨着上一屏,并且滚动的高度是页脚的高度)
函数performMovement (v) {//使用CSS3转换功能
如果选项。css3,,选项。autoScrolling,,! options.scrollBar) {
如果(v。anchorLink==footerl){//当滚屏到最后一屏时间
footer_a=$(' #下一个').height();//倒数第二屏的高度
footer_h=$(“#页脚”).height ();//页脚的高度
var translate3d=' translate3d (0 px - ' + (v。dtop - footer_a + footer_h) +“px, 0 px)”;
其他}{
var translate3d=' translate3d (0 px - ' + v。dtop +“px, 0 px)”;
｝
transformContainer (translate3d,真实);
setTimeout(函数(){
afterSectionLoads (v);
},options.scrollingSpeed);
｝//使用jQuery动画
其他{
var scrollSettings=getScrollSettings (v);
美元(scrollSettings.element) .animate (
scrollSettings.options
,选择。scrollingSpeed options.easing) .promise ()。完成(函数(){//只有一个回调的动画的html,身体的
afterSectionLoads (v);
}）;
｝
}
这样修改了之后,就不用担心最后一屏不满屏的问题了。
