这两天公司网页改版用到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. ES6中Set和Map

    1.Set 实例的创建 Set实例它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数用来生成Set数据结构. Set 函数可以接受一个数组(或者具有 iterable 接口 ...

  2. 算法巩固的第一天-java冒泡排序算法

    自媒体萌新一枚,不对的地方各路大神可以指点指点!个人理解: 冒泡排序算法<插入排序算法<快速排序算法 /** * 冒泡排序算法 * @author sj * */ public class ...

  3. ssm框架的小总结

    一.mybatis框架 mybatis框架主要就是完成持久层的实现,简化了持久层的开发, 1.首先是配置文件的编写,我们这里就命名为mybatis-config.xml,先配置文件头,然后加载连接数据 ...

  4. 【转帖】知乎关于鸿蒙OS的思考

    作者:bacon xu链接:https://www.zhihu.com/question/339567108/answer/782431141来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

  5. 小菜鸟之HTML第一课

    web项目 前端网页web(人体结构) HTML负责前端网页结构 Css负责网页样式 css引入 内联样式引入 内部样式 外部样式 三种基本引入器 id选择器 类选择器 标签选择器 <!DOCT ...

  6. redis哨兵sentinel.conf文件

    关闭保护模式 //17行 protected-mode no 端口号 //21 port 26379 后台启动 //26 daemonize yes //84行 主机的ip加端口号 2 为票数 sen ...

  7. C++中如何调用DLL文件

    一.动态链接库简介 动态库链接库英文位DLL,是Dynamic Link Library的缩写形式,DLL不是可执行文件.动态链接提供了一种方法,使进程可以调用不属于其可执行文件代码的函数.函数可执行 ...

  8. Ruby Rails学习中：登陆

    登陆 一. Sessions 控制器 登录和退出功能由 Sessions 控制器中相应的 REST 动作处理 : 登录表单在 new 动作中处理, 登录的过程是向 create 动作发送 POST 请 ...

  9. [经验分享] Docker网络解决方案-Weave部署记录

    前面说到了Flannel的部署,今天这里说下Docker跨主机容器间网络通信的另一个工具Weave的使用.当容器分布在多个不同的主机上时,这些容器之间的相互通信变得复杂起来.容器在不同主机之间都使用的 ...

  10. 04docker容器操作

    操作Docker container 容器是镜像的一个运行实例,镜像是静态的只读文件,容器带有运行时需要的可写文件层,同时,容器中的应用进程处于运行状态 1:新建一个容器 ubuntu@ubuntu: ...