如何在滚动时创建内容更改的网站？

Question

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

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

Answer 1

你需要使用javascript.

基本上你向你的身体添加一个滚动事件,如:

$(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/