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();
});

LIVE DEMO

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