这篇问题已被关闭，原因：与社区已有问题重复 - 请输入已有问题网址

如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？

发布于
2015-02-09

fullpage.js是一个很好的一页式幻灯片效果插件，但是默认只有一屏一屏的滚动功能。我想知道如何能够使用它实现类似锤子手机页面的首屏和尾屏的效果呢？
1. 首屏有头部，滚动鼠标才切换到第一屏，头部隐藏；
2. 尾屏有个附加信息的底部，在最后一屏滚动鼠标，底部才显示出来。
演示效果：http://www.smartisan.com/#/overview

图片描述

前端 jquery fullpage

阅读 18.1k

10 个回答

得票最新

playing

发布于
2015-02-09

✓ 已被采纳

前两天刚好也做了一个类似的页面,这种第一屏和最后一屏的部分滚动通过把滚动的距离改成navbar或者footer的高度就可以实现,但是fullpage好像没有单独的设置来修改每一次滚动的距离,所以你可能要稍微改一下他的js.判断是否第一/最后一屏,然后算一下高度就OK.

wss2881938

发布于
2015-12-04

这个简单撒，直接CLASS加个属性就OK了他插件自带的属性比如你的尾页友情链接是这个
<div class="section fp-auto-height"> 加一个这个CLASS就行了：fp-auto-height 亲测有用

浮流线丶

314

发布于
2015-02-26

新手上路，请多包涵

能看下你们改好的成品吗？

已注销

39024

发布于
2015-02-26

修改一下滚动相关代码，判断当前页面应该就好了，参考：http://www.gbtags.com/gb/gbliblist/84.htm

cagnot

发布于
2015-05-31

新手上路，请多包涵

问题解决了吗
正好也遇到了

我腐fby

发布于
2015-05-31

新手上路，请多包涵

解决了的给个答案把。。在线等，挺急的

Aeven

40112

发布于
2015-07-15

参考这个实现方式http://jsfiddle.net/reddy887/o4uywjrn/

最爱的是不二

发布于
2016-05-20

新手上路，请多包涵

如果给底部加通底<div class="section fp-auto-height"></div>亲测有效！

sole

3042718

发布于
2016-09-22

找了大半天，终于找到原因了，是因为你值引用了js，但是没有引用css；你在网上随便找一个教程，都有说引入jquery.fullPage.css的，比如：链接描述，so，步骤如下：
第一步：在页面要引入jquery.fullPage.css、jquery.fullPage.js
第二部：给需要添加自动高度的元素添加 fp-auto-height，就可以了【注意，这里常用的地方是导航和底部，那就得把头部和底部放到你切换元素的里面，请看图吧】
图片描述

无敌小霸王

发布于
2017-03-16

更新于
2017-03-16

新手上路，请多包涵

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/vendors/jquery.easings.min.js"></script>
    <style>
        
    </style>
    <title></title>
</head>
<body>

    <div id="fullpage">
        <header class="section header"><h1>这是第一屏</h1></header>
        <div class="section"><h1>这是第2屏</h1></div>
        <div class="section"><h1>这是第3屏</h1></div>
        <div class="section"><h1>这是第4屏</h1></div>
        <div class="section section5"><h1>这是第5屏</h1></div>
    </div>
    <script>
        $(document).ready(function(){
            $('#fullpage').fullpage();
            
            $('.header').css({'height':'200px'})
            $('.section5').css({'height':'200px'})
            
        })
        
        
    </script>
</body>

</html>

这个问题已经被关闭无法回答

推荐问题

如何使用fullpage.js实现锤子手机的首屏和尾屏的效果？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何在浏览器开发者工具中导入本地JS文件并直接运行？

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?