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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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
第十一节 重载 [11]
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
潜说js对象和数组
2011/05/25 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
cdn模式下vue的基本用法详解
2018/10/07 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python进程间通信用法实例
2015/06/04 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
一行python实现树形结构的方法
2019/08/09 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python两种注释用法的示例
2020/10/09 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
环境科学专业个人求职信
2013/09/26 职场文书
升职自荐书范文
2013/11/28 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
2014年学前班工作总结
2014/12/08 职场文书
专职安全员岗位职责
2015/04/11 职场文书
《藏戏》教学反思
2016/02/23 职场文书
MySQL创建定时任务
2022/01/22 MySQL
介绍一下28个JS常用数组方法
2022/05/06 Javascript