Question

我想在其余内容后面显示一个页脚，但我遇到的问题是我的网站继续滚动整个屏幕，而不仅仅是页脚的300px高度。以下是我到目前为止的情况：

http://everetdale.com/starfalling.ca/

正如你所看到的那样，页脚被揭示出来，但它上面有很多白色空间。这是一个做我想做的网站：

http://ideaware.co/

如何在页脚显示后滚动停止，我该怎么做？

Answer 1

/ *根据评论更新答案* /

由于没有别的东西可以移动，只有背景图像会“显示”视差类型效果，我建议只使用HTML / CSS，可以在这里演示：

http://jsfiddle.net/VyQdY/

HTML代码：

<div id="one">
     <p> Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. </p>
</div>
<div id="two">
    <p> Two Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text.     </p>
</div>
<div id="three">
    <p> And finally three Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. Lorem ipsum and other text. </p>
</div>

各自的CSS：

#one, #two, #three {height: 600px; width:100%;}

#one {background: url(http://placekitten.com/600/800) top center fixed;}
#two {background: url(http://placekitten.com/700/800) center center fixed;}
#three {background: url(http://placekitten.com/600/850) top center fixed;}

（请原谅占位符小猫的背景图片，我甚至不喜欢小猫）

/ *原始答案* /

在不知道更多或看到你的代码的情况下，我可以说问题与整个页面的高度有关（也许是页脚上方的div）。

当你到达页脚顶部时，你需要确保高度处于“停止滚动”的位置。

如果您将代码粘贴到jsfiddle中，我可以帮助解释更多（甚至演示）。

此外，您似乎正在使用javascript来执行此操作 - 您是否计划在滚动时在不同时间移动不同的背景和图像，或者所有内容都是“静态”并且只在滚动时“显示”？如果是这样，你只需要HTML和HTML即可完成所有这些工作。 CSS。

Answer 2

javascript计算两个主要＆gt; li的组合高度，并使用函数setBodyHeight（）来设置身高。由于您在顶部li（＃section-1）中的内容高很多，因此计算失败。你应该开始检查这个......

Answer 3

我已经阅读了您的源代码，我可以看到您有一个li元素来容纳我认为主要内容。现在这个元素动态地将它的margin-top CSS规则从0改为600左右。我想知道这是否是你的问题，因为当你向下滚动时，由于这个{{1}，这个元素被强制推高。改变。

我无法准确找到您的问题，因为我之前没有使用margin-top，但可能会尝试查看为什么您的元素获得如此高的curtain.js并看看您是否可以删除它。

我希望这有帮助！

仅300px高的页脚的视差效果？

3 个答案: