html - 如何根据用户在页面上向上或向下滚动的距离使对象出现和消失？

Question

我正在尝试制作一个固定在页面顶部的标题，只有在用户向下滚动到页面顶部的其他内容（即我的“黑盒”div）时才会出现。如果我能让标题也能正常工作，我可能想对网站上的其他一些东西使用同样的效果，但我们会看到的。

.header{
background:yellow; 
width:100%;
height:70px;
position:fixed;
top:0px;
box-shadow: 2px 5px 10px rgba(0,0,0,0.2);
z-index: 10;
}

.blackbox{
background:black;
width:100%;
height:350px;
top:60px;
overflow:hidden;
position:fixed;
z-index:3;
}

.homespace{
width:100%;
background:green;
height:700px;
position:relative;
margin-top:0px;
z-index:8;
}

Answer 1

您可以使用 JQUERY。

假设您正在滚动页面。

$(document).scroll(function(){
    if($(document).scrollTop()>"100")
      //after you've scrolled 100 pixels...
      $("#something").show();
});

现场演示

更多关于：.scroll() .scrollTop()

Answer 2

您可以为此使用 jQuery。

$(document).ready(function(){
    $(window).scroll(function () {
       $('.blackbox').fadeIn();
        if($(this).scrollTop()==0){
         $('.blackbox').fadeOut();
        }
    });
});

这是 JSFiddle 上的一个示例 - LIVE DEMO（滚动右下角窗口以查看实际演示）

.scroll()和scrollTop()等 jQuery 方法就是您所需要的。他们会让你的生活变得轻松。

Answer 3

参考这篇文章：

如何获取用户向下滚动页面的像素数？

基本上确定用户滚动了多远，将该值与“黑盒”的高度进行比较，然后让 JS 应用一个类或使用 jQuery 之类的东西来隐藏（）或显示（）。