fullpage.js最后一屏滚动方式


Posted in Javascript onFebruary 06, 2018

这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档。
而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空,好尴尬的说

fullpage.js最后一屏滚动方式

底部的footer部分就是我要单独处理的部分,从网上搜了各种资料,总结了一下,个人觉着最简单的方法,写一篇文章以便以后查阅。

<!--footer及倒数第二屏的HTML-->
  <body data-spy="scroll">
   <div id="dowebok" class="container-fluid">
    <div class="section" id="nextS">
      <div class="sect ">
          <div class="sectcenter4"></div>
      </div>
      <div class="sect sectbg2">
        <div class="container">
          <div class="sectcenter5"></div>
        </div>
      </div>
    </div>
    <div class="section footerss"><footer class="footer" id="footer"></footer></div>
   </div>
  </body>
//初始化滚屏的一些内容,最重要的是设置好锚点,这里重点是最后一屏(footer)的锚点footerl
    $('#dowebok').fullpage({
      verticalCentered: false,
      resize: true,
      navigation: true,
      anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
    });

写完这些,实现的就是下面如图的效果,整个footer占了一屏,并且是垂直居中显示的。

fullpage.js最后一屏滚动方式

根据要实现的效果,要做的就是让footer紧挨着#nextS这一屏(不垂直居中)+到#nextS这一屏的时候,再往下的滚动距离就不能是一屏了(必须是footer的高度)。
按着整个思路,先解决css的问题

.section.footerss .fp-tableCell{//修改最后一屏display属性
    display: block!important;
  }
//实现footer紧挨着#nextS这一屏显示,底部出现

fullpage.js最后一屏滚动方式

下面修改fullpage.js的问题,在引用的fullpage.js文件中找到performMovement这个方法,按照如下方法,修改一下,就可以达到想要的效果(footer紧挨着上一屏,并且滚动的高度是footer的height)

function performMovement(v){ 
 // using CSS3 translate functionality 
 
 if (options.css3 && options.autoScrolling && !options.scrollBar) { 
 

if (v.anchorLink == 'footerl'){ //当滚屏到最后一屏时间 
 


footer_a = $('#nextS').height();//倒数第二屏的高度 
 


footer_h = $('#footer').height(); //footer的高度
 


 var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)'; 
 

 }else{ 
 


var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)'; 
 

} 
 

transformContainer(translate3d, true); 
 

setTimeout(function () { 
 


afterSectionLoads(v); 
 

}, options.scrollingSpeed); 

 } 
 
// using jQuery animate 
 
else{ 
 

var scrollSettings = getScrollSettings(v); 
 

$(scrollSettings.element).animate( 
 


scrollSettings.options 
 


, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body` 
 


afterSectionLoads(v); 
 

 }); 
 
} 
 }

这样修改了之后,就不用担心最后一屏不满屏的问题了。

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 #Javascript
微信小程序使用Promise简化回调
Feb 06 #Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 #Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 #Javascript
vue一个页面实现音乐播放器的示例
Feb 06 #Javascript
使用百度地图实现地图网格的示例
Feb 06 #Javascript
js中的闭包学习心得
Feb 06 #Javascript
You might like
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jQuery 性能优化指南(3)
2009/05/21 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
BootStrap selectpicker
2016/06/20 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Python with语句用法原理详解
2020/07/03 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
python调用摄像头的示例代码
2020/09/28 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
社会实践心得体会
2014/01/03 职场文书
消防安全责任书
2014/04/14 职场文书
会计个人实习计划书
2014/08/15 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
MySQL学习之基础操作总结
2022/03/19 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android