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. Linux bash介绍与使用

    Linux————bash的简单使用 对于一个操作系统来说,shell相当于内核kernel外的一层外壳,作为用户接口.一般来说,操作系统的接口分为两类:CLI:command line interf ...

  2. 【iOS系列】-UIImageView帧动画相关属性介绍

    UIImageView帧动画相关属性介绍 1:相关属性: //An array of UIImage objects to use for an animation.存放UIImage对象,会按顺序显 ...

  3. jQuery的AJax异步訪问

    用一个样例用以说明:点击button,将input内用户输入的数据发送给服务端.并将结果返回给页面. 首先是html承载内容: <!DOCTYPE html> <html> & ...

  4. css的白富美

    1,CSS(Cascading Style Sheet)是用来装饰HTML的,当浏览器读到这样一个样式的时候,它就会按照这个文档进行格式化(渲染) 2,CSS的组成:选择器和声明,声明又包括属性和属性 ...

  5. XMU 1607 nc与点对距离 【线段树】

    1607: nc与点对距离 Time Limit: 5000 MS  Memory Limit: 512 MBSubmit: 60  Solved: 8[Submit][Status][Web Boa ...

  6. Count on an IEnumerable<dynamic>

    http://stackoverflow.com/questions/7733305/count-on-an-ienumerabledynamic int count = Enumerable.Cou ...

  7. get the page name from url

    https://stackoverflow.com/questions/1874532/better-way-to-get-page-name The way I interpret the ques ...

  8. Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html

    Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...

  9. SPOJ:Fibonacci Polynomial(矩阵递推&前缀和)

    Problem description. The Fibonacci numbers defined as f(n) = f(n-1) + f(n-2) where f0 = 0 and f1 = 1 ...

  10. Surface pro4 触摸板手势快捷键

    [一个手指]:这个大家都知道就不必在介绍了,跟之前win7一样,滑动就是鼠标,轻点(或者按左下方)就相当于点鼠标左键.(两个按键按起来真心手感不咋的,所以基本不用)[两个手指]:1.两个手指向上或下滑 ...