0

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

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

如您所见，页脚已显示，但其上方的大量空白区域也是如此。这是一个做我想做的网站：

http://ideaware.co/

我怎样才能使它在页脚显示后停止滚动？

4

3 回答 3

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;}

​ ​</p>

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

/ *原始答案* /

在不了解更多信息或查看您的代码的情况下，我可以说问题与整个页面的高度有关（可能是页脚上方的 div）。

您需要确保高度在到达页脚顶部时“停止滚动”。

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

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

于 2012-10-25T21:06:13.630 回答
0

javascript 计算两个主要 ol>li 的组合高度，并使用函数 setBodyHeight() 设置身体高度。因为您在顶部 li (#section-1) 中的内容要高得多，所以这个计算失败了。你应该开始检查这个...

于 2012-10-25T21:03:03.433 回答
0

我已经阅读了你的源代码，我可以看到你有一个li元素来包含我假设的主要内容。现在这个元素正在动态地将它的margin-topCSS 规则从 0 更改为大约 600。我想知道这是否是你的问题，因为当你向下滚动时，由于这种margin-top变化，这个元素被迫变得非常高。

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

我希望这有帮助！

于 2012-10-25T21:08:14.273 回答