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 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
Js获取事件对象代码
Aug 05 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
JSONP跨域请求
Mar 02 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
vue实现侧边栏导航效果
Oct 21 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
用PHP实现验证码功能
2006/10/09 PHP
PHPMailer发送邮件
2016/12/28 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
幼儿园秋游感想
2014/03/12 职场文书
倡议书范文格式
2014/05/12 职场文书
保证书格式
2015/01/16 职场文书
公务员年度个人总结
2015/02/12 职场文书
老人与海读书笔记
2015/06/26 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
导游词之青岛崂山
2019/12/27 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS