这两天公司网页改版用到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. Mac 操作小技巧

    系统版本 MacOs Mojava # 快捷键篇: 1. 打开终端:command+空格,输入terminal:在终端页面,新建终端command + T 2. 打开文件夹:command + T 3 ...

  2. POJ3450最长公共子串【kmp】

    题目链接:http://poj.org/problem?id=3450 题目大意:给定n个长度不超过200的字符串,n < 4000.求这些字符串的最长公共子串,若没有,则输出 “IDENTIT ...

  3. mysql --explain+slowlog

    一.EXPALIN 在SQL语句之前加上EXPLAIN关键字就可以获取这条SQL语句执行的计划 那么返回的这些字段是什么呢? 我们先关心一下比较重要的几个字段: 1. select_type 查询类型 ...

  4. Design Phone Directory

    Design a Phone Directory which supports the following operations: get: Provide a number which is not ...

  5. 12306火车票余票查询&Python实现邮件发送

    查询余票接口 打开12306官网,并进入余票查询页面,同时开启chrome浏览器F12控制台,以北京到上海为例,搜索2018年10月1日的余票信息,点击搜索按钮,可以在控制台发送了一条GET请求,请求 ...

  6. 杭电2019多校第一场，Problem I，String 2019

    题目描述 Tom has a string containing only lowercase letters. He wants to choose a subsequence of the str ...

  7. Jmeter之梯度式加压（Stepping Thread Group）

    1.添加线程组(Stepping Thread Group) 2.设置数据 学习参考网址:https://www.cnblogs.com/imyalost/p/7658816.html   这个大大的 ...

  8. Spring Boot源码分析-启动过程

    Spring Boot作为目前最流行的Java开发框架,秉承"约定优于配置"原则,大大简化了Spring MVC繁琐的XML文件配置,基本实现零配置启动项目. 本文基于Spring ...

  9. Java多线程（二）：Thread类

    Thread类的实例方法 start() start方法内部会调用方法start方法启动一个线程,该线程返回start方法,同时Java虚拟机调用native start0启动另一个线程调用run方法 ...

  10. 【ExtJs】获取grid选中的records

    var records = me.grid.getSelectionModel().getSelection(); //获取所有选中的行 var record =records[0]; //获取选中行 ...