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. 关于 equals()与hashcode()方法

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

  2. STL_算法_元素计数(count、count_if)

    C++ Primer 学习中.. . 简单记录下我的学习过程 (代码为主) count . count_if #include<iostream> #include<cstdio&g ...

  3. leetCode(26):Unique Binary Search Trees

    Given n, how many structurally unique BST's (binary search trees) that store values 1...n? For examp ...

  4. asp.net 实现搜索站内搜索功能

    首先有index和search 两个页面 index页面中有textbox1和button1两个控件 双击button1控件添加代码: protected void Button1_Click(obj ...

  5. Java中有多少种设计模式？请简单画一下三种常见设计模式的类图？

    转载:http://blog.csdn.net/longyulu/article/details/9159589 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽 ...

  6. HelloH5+搭建

    一.所用工具 代理服务器:squid 编辑工具:HBuilder 调试工具:weinre 参考工具:Hello MUI    HelloH5 二.涉及项目 ***-pifa-------------- ...

  7. FineReport实现java报表统计图表的效果图

    Java报表-ERP图表联动 Java报表-多维坐标轴图 Java报表-静态图表 Java报表-时间坐标轴 Java报表-图表报表动态交互 Java报表-图表热点链接 Java报表-图表缩放 Java ...

  8. Latex 1: 解决latex中遇到一个常见错误:"Improper alphabetic constant."

    1.问题: 本人是在WIN7下用texlive 2016,编辑器用的是WinEdt 10.1 ,运行如下代码: \documentclass{ctexbook} \begin{document} \t ...

  9. Evernote相关技术介绍——mysql+lucene+tomcat

    Evernote服务 我们的服务由以下几个组件组成. 分片(NoteStore)   分片是Evernote服务的核心单元,用于存储用户的笔记.每个分片最多可以支撑30万个Evernote用户,并包含 ...

  10. 并不对劲的p2664树上游戏

    题目大意 有一棵\(n\)(\(n\leq10^5\))个点的树,每个点\(i\)有颜色\(c_i\)(\(c_i\leq10^5\)) 定义一条路径的得分为这条路径上的不同颜色个数 分别求每个点的以 ...