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将变为可见。

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

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

你也可以通过制作像showAt300这样的类并在选择器中使用它来通过将这些元素设置为display: block;

来显示所有这些元素。

上述方法也可以通过设置display: none;来使项目在某些位置再次隐藏。

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

参考文献：

滚动活动：http://api.jquery.com/scroll/
滚动位置：http://api.jquery.com/scrollTop/

Answer 2

您可以使用jQuery Parallax。 See here for more examples of sites that use it

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

2 个答案: