这两天公司网页改版用到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占了一屏，并且是垂直居中显示的。

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

    .section.footerss .fp-tableCell{//修改最后一屏display属性

        display: block!important;

    }

//实现footer紧挨着#nextS这一屏显示，底部出现


下面修改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);

 　　　　　});

 　　}

 }

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

fullpage.js最后一屏不满一屏时，滚动方式的更多相关文章

  1. 关于fullpage.js 和animate.css制作全屏简单大方的首页

    附上源码: html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. 学习笔记： js插件 —— fullPage.js （页面全屏滚动）

    fullPage.js (页面全屏滚动) 必须依赖 jquery-ui.min.js,   233K 14760个星. 以后有时间再看. API挺全 https://github.com/alvaro ...

  3. FullPage.js 活动单页 - 全屏滚动插件

    插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...

  4. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  5. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  6. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  7. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  8. jquery.fullPage.js全屏滚动插件教程演示

    css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Micro ...

  9. jQuery+fullPage.js演示10种全屏滚动

    基本演示 背景演示 循环演示 回调函数演示 绑定菜单演示 项目导航演示 自动滚动 slide自动滚动 响应式 下载地址 实例代码 <!DOCTYPE html> <html lang ...

随机推荐

  1. sops的配置过程

    0.demo关键 1.关键信息,不能用5.1.6版本的,还有很多坑 蓝鲸版本: 标准运维:bk_sops_V3.1.39.tar 2.简单理解: 标准运维实际上调用作业平台job的API去执行 要跑通 ...

  2. React组件优化

    父组件传值给子组件时只要文本框发生变化就会重新渲染render,我理解我会影响性能,记录下方法用这个生命周期 shouldComponentUpdate 的方法就可以解决子组件重复渲染的问题 shou ...

  3. Linux-echo:打印彩色输出

    脚本可以使用转义序列在终端中生成彩色文本 文本颜色是由对应的色彩码来描述的.其中包括: 重置=0,黑色=30,红色=31,绿色=32, 黄色=33,蓝色=34,洋红=35,青色=36,白色=37. 要 ...

  4. T100——按xls格式批量导入数据

    弹出File Browser窗口 PRIVATE FUNCTION cxrt020_open_file() DEFINE l_dir LIKE type_t.chr500 DEFINE r_succe ...

  5. Codeforces 1244F. Chips

    传送门 显然可以注意到连续的两个相同颜色的位置颜色是不会改变的,并且它还会把自己的颜色每秒往外扩展一个位置 同时对于 $BWBWBW...$ 这样的序列,它每个位置的颜色每一秒变化一次 然后可以发现, ...

  6. html homework27

    1. 使用框架完成如下功能 将框架先上下分割成两部分(上半部分的为TopFrame).再将下半部分垂直分割为两部分(左侧为BottomLeftFrame,右侧为BottomRightFrame),为T ...

  7. vue和react区别

    vue和react区别  

  8. sp_addlinkedserver 跨服务器连接数据库查询

    ----创建远程链接服务器--exec sys.sp_addlinkedserver --@server='LMS',--被访问的服务器别名--@srvproduct='',--@provider=' ...

  9. 如何使用Navicat 创建一个SqlServer定时任务

    因为网上资料不全,所以自己琢磨了一上午,终于弄出来了,记录一下. step1: 右击[函数]选择[新建函数]添加一个存储过程 step2: 选择[过程],点击下一步直至完成,然后编辑存储过程,保存 s ...

  10. SpringCloud 配置文件 application.yml和 bootstrap.yml区别

    前言: SpringBoot默认支持properties和YAML两种格式的配置文件.前者格式简单,但是只支持键值对.如果需要表达列表,最好使用YAML格式.SpringBoot支持自动加载约定名称的 ...