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. ubuntu下spring环境搭建

    一.安装JDK 下载官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 部署: ...

  2. Python爬虫开发【第1篇】【爬虫案例】

    案例一:网站模拟登录 # douban.py from selenium import webdriver from selenium.webdriver.common.keys import Key ...

  3. sublime text 3 乱码

    sublime text 是一款很好用的文字编辑软件,可谓是程序员必备,但是最近发现在mac端使用的时候,中文乱码, 网上一些解决方案,抄袭严重,没有解决实际问题,所以记录下自己解决问题的过程. 1. ...

  4. Linux服务基础命令

    ---恢复内容开始--- 1简介: Linux的网络功能相当强悍,一时之间我们无法了解所有的文阿罗命令,在配置服务器基础环境时,先了解下网络参数设定命令. ifconfig     查询,设置网卡和i ...

  5. POJ之01背包系列

    poj3624 Charm Bracelet 模板题 没有要求填满,所以初始化为0就行 #include<cstdio> #include<iostream> using na ...

  6. shutdown的几种方式,shutdown abort的一些弊端有哪些

    1.shutdown normal     正常方式关闭数据库. 2.shutdown immediate     立即方式关闭数据库.     在SVRMGRL中执行shutdown immedia ...

  7. SoapUI中Code多行显示设置

    你们的SoapUI 有设置下面的选项吗? Before adding your project, we recommend that you enable the following ReadyAPI ...

  8. Windows7 配置匿名Samba文件共享

    1.环境 系统:Windows 7 SP1 IP:192.168.118.151 2.配置 计算机|管理|本地用户和组|用户|Guest-->去掉账户已禁用 cmd|gpedit.msc|本地计 ...

  9. Java-Runoob-高级教程-实例-字符串：13. Java 实例 - 字符串格式化

    ylbtech-Java-Runoob-高级教程-实例-字符串:13. Java 实例 - 字符串格式化 1.返回顶部 1. Java 实例 - 字符串格式化  Java 实例 以下实例演示了通过 f ...

  10. js函数定义 参数只要写名称就可以了

    js函数定义  参数只要写名称就可以了 以下为标准: function add(type)  { } 不要写成下面这个样子 function add(var type)  { } 哎 妹的  老何ja ...