3

分割结束后页脚丢失。

<div id="fullpage">
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
  <div class="section " id="section0"> content1 </div>
</div>
<footer> this is my footer </footer>

这是我的脚本

<script type="text/javascript">
  $(document).ready(function() {    
     $('#fullpage').fullpage({
        verticalCentered: false,
        resize : true,
        easing: 'easeInQuart',
        navigation: true,
        navigationPosition: 'right',
        scrollOverflow: false,
     });    
  });
</script>

我使用整页 js 滚动工作顺利，但页脚没有显示。

4

4 回答 4

2

默认情况下，fullpage 不支持您尝试的此页脚解决方案。我对原始的 fullpage.js 做了一个简单的扩展，它支持这个。

            if (v.anchorLink == 'footer')
            {
                footer_a = $('#section-footer').height();
                footer_h = $('#footer-text').height();
                var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
            }
            else
            {
                var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
            }

你可以试试：链接

页脚高度由其中的文本计算得出。

于 2015-02-06T18:42:39.193 回答
1

如果您使用 fullpage.js 2.7.1 的新功能，您可以做到这一点。（自动高度部分）

在文档中查看它

这里有一个在线示例。滚动到最后一部分。

于 2014-06-27T09:57:10.630 回答
1

您的小提琴看起来与原始问题中发布的代码不同，但是，答案应该仍然适用。

改变你的CSS：

#footer{
    bottom:0px;
}

至：

#footer{
    position: fixed;
    bottom:0;
}

http://jsfiddle.net/GUTBA/

编辑 - 以上内容会将页脚固定到所有部分的页面底部。如果要求在最后一张幻灯片之后显示它，您将需要执行以下操作之一：

如果页脚是固定高度 ，则将 css 更改为：

#footer{
    bottom: 20px;
    height: 20px;
    position: relative;
}

http://jsfiddle.net/vU5hY/

这会将页脚从幻灯片后的位置向上移动一个等于其高度的量。

如果页脚不固定高度 将css更改为：

#footer{
    bottom: 0;
    position: absolute;
}
.section {
    position: relative;
    text-align: center;
}

将 HTML 更改为：

<div class="section" id="section3">
    <div class="sectionContent">
        <h1>Section 3</h1>
    </div>
    <div id="footer">Footer</div>
</div>

http://jsfiddle.net/CKGQ5/

将页脚移动到最后一张幻灯片中，将容器设置为位置：相对；这样当我们将页脚设置为 position: absolute; 它是相对于它定位的。

于 2014-06-26T07:18:28.473 回答
0

我在整页 div 之外有一个非固定页脚。当我为固定高度的页脚尝试上述 css 代码时，它导致页脚下方的额外空间等于“底部”属性中设置的高度（在上述情况下为 20 像素）。

但是，使用以下代码不会增加额外的空间，它可以用于可变高度的页脚：

.footer {
    padding: 30px 0;
    bottom: 75px;
    margin-bottom: -75px;
    position: relative;
}
于 2015-09-18T13:07:35.063 回答