jquery - 仅 300 像素高的页脚有视差效果？

Question

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

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 和 CSS 即可完成所有这些。