fullpagejs实现的拥有header和foooter的全屏滚动，

技术要点：给section元素加fp-auto-height类，

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>fullpage footer</title>

    <link href="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

    <script src="https://cdn.bootcss.com/fullPage.js/2.9.5/jquery.fullpage.js"></script>

    <style>

        .section {

            text-align: center;

            font: 30px "Microsoft Yahei";

            color: #fff;

        }

        .header, .footer {

            height: 100px;

        }

    </style>

    <script>

        $(function () {

            $('#stumpx').fullpage({

                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']

            });

        });

    </script>

</head>

<body>

<div id="stumpx">

    <div class="section fp-auto-height header">

        <h3>第一屏 header</h3>

    </div>

    <div class="section">

        <h3>第二屏</h3>

    </div>

    <div class="section">

        <h3>第三屏</h3>

    </div>

    <div class="section fp-auto-height footer">

        <h3>第四屏 footer</h3>

    </div>

</div>

</body>

</html>

fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer的更多相关文章

  1. swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer

    用swiper4实现的拥有header和footer的全屏滚动demo, <!DOCTYPE html> <html lang="en"> <head ...

  2. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  3. 06-移动端开发教程-fullpage框架

    CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js.我们经常见到一些全屏的特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果 ...

  4. web前端常用js插件

    第一款:截图插件html2Canvas.js html2是一款强大的截图插件,只需引入js文件,依照官方给定的截图方法,就能截取对应DOM区域的内容.对于有些截图出现模糊偏移的问题,网上也有一堆解决方 ...

  5. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

  6. JavaScript资源大全

    目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框架 模板引擎 数据可视化 编辑器 UI 输入 日历 选择 文件上 ...

  7. Awesome Javascript(中文翻译版)

    [导读]:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架 ...

  8. javascript功能插件大集合，写前端的亲们记得收藏

    伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理.欢迎扩散.欢迎加入. https://github.com/jobbole/awesome-javascript-cn ...

  9. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

随机推荐

  1. c语言实现输出一个数的每一位

    比方输入1234.在屏幕上打印出1 2 3 4 代码展示: 方法一: #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> #includ ...

  2. Visual Studio Code 常用插件

    这里记录在Visual Studio Code中,我经常用到的插件. C#这个就不必说了,想用VIsual Studio Code调试和编辑C#代码,必须要装这个插件.东西还好,就是每次安装和更新插件 ...

  3. 关于 equals()与hashcode()方法

    类重写了equals()方法也必须重写hashcode()方法,否则会导致该类无法与基于散列值的集合(HashMap.HashSet.HashTable)一起正常使用. hashcode()方法遵循的 ...

  4. UVA 437 The Tower of Babylon巴比伦塔

    题意:有n(n≤30)种立方体,每种有无穷多个.要求选一些立方体摞成一根尽量高的柱子(可以自行选择哪一条边作为高),使得每个立方体的底面长宽分别严格小于它下方立方体的底面长宽. 评测地址:http:/ ...

  5. apt-pkg

    1 什么是apt-pkg python的apt库,可以做apt可以做的任何事情. 2 apt_pkg.parse_depends(depends, strip_multiarch=True) 这里的d ...

  6. java根据文件流判断文件类型（后缀名）

    import java.io.FileInputStream; public class FileType{ public static String bytesToHexString(byte[] ...

  7. WebBrowse使用

     C# WinForm开发系列 - WebBrowser 2009-12-14 14:19:21 标签:C# - WebBrowser 休闲 WinForm开发系列 介绍Vs 2005中带的WebBr ...

  8. ExtJS4 带清除功能的文本框 triggerfield

    Ext.onReady(function () { Ext.create('Ext.form.FormPanel', { title: 'Form with TriggerField', bodyPa ...

  9. SVN常用命令说明（转载）

    转自:http://www.blogjava.net/jasmine214--love/archive/2011/01/12/342839.html /** * 转载请注明作者longdick htt ...

  10. zoj 2760 How Many Shortest Path【最大流】

    不重叠最短路计数. 先弗洛伊德求一遍两两距离(其实spfa或者迪杰斯特拉会更快但是没必要懒得写),然后设dis为st最短距离,把满足a[s][u]+b[u][v]+a[v][t]==dis的边(u,v ...