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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
原生javascript实现分页效果
Apr 21 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
vue-router为激活的路由设置样式操作
Jul 18 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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP实时显示输出
2008/10/02 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
js实现简易ATM功能
2020/10/27 Javascript
原生js实现自定义难度的扫雷游戏
2021/01/22 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
Python单元测试简单示例
2018/07/03 Python
python实现简单图片物体标注工具
2019/03/18 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python常用数据分析模块原理解析
2020/07/20 Python
解决python3输入的坑——input()
2020/12/05 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
幼师辞职信范文大全
2015/05/12 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js