这两天公司网页改版用到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. Guava源码阅读-io-Files

    package com.google.common.io; 今天阅读一个非常常用的类Files,文件操作类. readLines(File file, Charset charset),这个方法将Fi ...

  2. rowkey散列和预分区设计解决hbase热点问题(数据倾斜)

    Hbase的表会被划分为1....n个Region,被托管在RegionServer中.Region二个重要的属性:Startkey与EndKey表示这个Region维护的rowkey的范围,当我们要 ...

  3. Javascript学习笔记三——操作DOM（二）

    Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...

  4. Shortest Distance from All Buildings

    You want to build a house on an empty land which reaches all buildings in the shortest amount of dis ...

  5. Synchronized的实现原理（汇总）

      一.Java中synchronized关键字的作用 总所周知,在并发环境中多个线程对同一个资源进行访问很可能出现脏读等一系列线程安全问题.这时我们可以用加锁的方式对访问共享资源的代码块进行加锁,以 ...

  6. JavaScript - 过滤敏感字符

    目录 before 源码示例 before 本篇博客展示了如何是在前端对铭感字符及一些特殊的命令做过滤. 好处是,少发一次请求,减少服器校验压力. 源码示例 <!DOCTYPE html> ...

  7. linux 下用find命令查找文件，rm命令删除文件

    linux 下用find命令查找文件,rm命令删除文件. 删除指定目录下指定文件find 要查找的目录名 -name .svn |xargs rm -rf 删除指定名称的文件或文件夹: find -t ...

  8. vs2010 回车、退格键等不能用

    有时候在vs2010中,突然回退键.回车键.方向键就用不了了,百度一堆方法,最后找到按Alt+Enter,就可以用了.

  9. mysql java jdbc 如何 update select

    2019年8月6日17:28:07 sql 不知道怎么写,也没去查,因为需求可能中途需要修改值,有点麻烦 直接用jdbc实现. 查询出来的值,直接根据update条件更新,写在一个方法里 public ...

  10. vue入门：（class与style绑定）

    对象语法 数组语法 一.对象语法 1.1对象语法绑定HTML Class 语法:v-bind:class="{'className1':boolean1,'className2':boole ...