这两天公司网页改版用到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. airflow_failover启动scheduler

    参考: https://github.com/teamclairvoyant/airflow-scheduler-failover-controller 1.stop failover2.stop s ...

  2. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  3. Ubuntu 下几种软件安装的方法小结

    1.tar.gz软件包的安装 1)解压tar.gz包 .tar.gz -C /home/Desktop # 将软件包名.tar.gz解压到指定的目录下 2)进入解压后的文件目录下      执行“./ ...

  4. dij 费用流

    #include <bits/stdc++.h> using namespace std; typedef long long lld; const int MAXN = 50010, M ...

  5. python 安装PostgreSQL 模块：psycopg2

    官方资料:http://www.psycopg.org/psycopg/docs/ 安装: yum -y install python-psycopg2 (安装的版本可能是2.0) pip insta ...

  6. Codeforces 1244F. Chips

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

  7. cent0S 设置静态ip

    TYPE=EthernetPROXY_METHOD=noneBROWSER_ONLY=noBOOTPROTO=static # static ip,#BOOTPROTO=dhcp # dynamic ...

  8. JavaScript设计模式（装饰者模式）

    一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...

  9. Python——用turtle画一个月饼

    今天是中秋节,首先在这里祝大家中秋快乐!那么提到中秋,我们首先想到的当然是香甜的月饼,所以我今天就在这里画一个月饼送给大家. 那么 要用Python画图,我们必须掌握并运用Turtle库,这个可以自己 ...

  10. 13 Django之中间件

    一.什么是中间件 中间件顾名思义,是介于request与response处理之间的一道处理过程,相对比较轻量级,并且在全局上改变django的输入与输出.因为改变的是全局,所以需要谨慎实用,用不好会影 ...