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. Dos下同时执行多条命令简化操作

    起因,要查询8080端口被哪些程序占用了,但是直接在cmd netstat –ano 的话 一下子一大把数据出来了不利于查找, 于是就想起dos下可以同时指向多条命令,如是写下如下命令: netsta ...

  2. 借助ltp 逐步程序化实现规则库 文本生成引擎基于规则库和业务词库 去生成文本

    [哪个地方做什么的哪家靠谱?地名词库行业.业务词库]苏州做网络推广的公司哪家靠谱?苏州镭射机维修哪家最专业?昆山做账的公司哪家比较好广州称重灌装机生产厂家哪家口碑比较好 [含有专家知识]郑州律师哪个好 ...

  3. YTU 2597: 编程题B-选拔飞行员

    2597: 编程题B-选拔飞行员 时间限制: 1 Sec  内存限制: 128 MB 提交: 131  解决: 35 题目描述 2100年空军选拔高中生飞行学员基本条件要求如下,年龄范围:16-19周 ...

  4. Ubuntu+anaconda环境里安装opencv

    在Ubuntu的Anaconda环境下安装OpenCV比较方便,直接在终端中输入以下命令: conda install --channel https://conda.anaconda.org/men ...

  5. body和html

    1 关于html和body的背景颜色的一些变现 当给body设置背景颜色时(html没有背景颜色),这时body被当做根节点被浏览器俘获,浏览器界面的背景颜色就为body的background颜色:当 ...

  6. Ajax跨域访问等问题

    前端时间公司接口整顿,所有接口放一起了,然后我就写了一大堆API接口....... 今天用上了,公用人员库,前台通过ajax访问, 先是以‘json’作为数据格式进行访问,直接response fie ...

  7. Tomcat配置JVM运存

    setenv.bat set "JAVA_OPTS=-server -Xms256M -Xmx1024M -XX:PermSize=256m -XX:MaxPermSize=1024m&qu ...

  8. PCB CAM自动化后台配置说明

    CAM自动化项目经历9个月时间里,在我们IT团队与工程部深入合作下,依据PCB各种场景定制特定功能,且这几个月里在不断的改进与迭代脚本功能,在此期间攻破了一个又一个难题,最终项目第一阶段已顺立上线运行 ...

  9. HDU-ACM“菜鸟先飞”冬训系列赛——第9场

    Problem A 题意 一对兔子每月生一对兔子,兔子在\(m\)月后成熟,问\(d\)月后有多少兔子 分析 可以发现,第i月的兔子数量取决于第i-1月与i-m月,故 \(a[i]=a[i-1]+a[ ...

  10. python 闭包 Closure 函数作为返回值

    一.函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. >>> def lazy_sum(*args): ... def sum(): ... ax = ...