jquery - 如何创建内容在滚动时发生变化的网站？

Question

我想创建一个主页，当用户滚动时，内容会发生变化。假设用户滚动到位置 y 并且应该弹出一个图像，当他离开位置 y 时它应该消失。 这纯粹是根据滚动位置完成的，还是在我开始做一些愚蠢的事情之前还有其他“技巧”？ 我很确定这是通过 jQuery 实现的，但我只想要底层技术。

像这样的东西 http://dentsunetwork.com/

Answer 1

您需要为此使用 javascript。

基本上，您向 body 添加一个滚动事件，例如:

$(body).scroll(function() {
    if ( $this).scrollTop() > 200 ) {
        $('#someElement').css('display', 'block');
        $('#someOtherElement').css('display', 'block');    
    }
});

当您滚动超过 200 像素时，someElement 和 someOtherElement 将变得可见。

id 为 someElement 和 someOtherElement 的元素必须在开头为 display: none;。

您可以通过添加 ie. $this).scrollTop() > 400 并显示其他元素。

当然，您也可以通过创建类似 showAt300 的类并在选择器中使用它来显示所有这些元素，方法是将这些元素设置为 display: block;

上述方法当然也可以通过设置display: none; 来让元素在某些位置再次隐藏。

我还没有测试上面的例子，但至少它应该让你开始。

引用资料:

• 滚动事件:http://api.jquery.com/scroll/
• 滚动位置:http://api.jquery.com/scrollTop/