如何根据用户在页面上滚动多远来让对象显示和消失？

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).ready(function(){ 
    $(window).scroll(function() { 
     $('.blackbox').fadeIn(); 
     if($(this).scrollTop()==0){ 
     $('.blackbox').fadeOut(); 
     } 
    }); 
}); 

这里是的jsfiddle一个例子 - LIVE DEMO（滚动右下角的窗口在行动中看到演示）

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

Answer 2

参考这篇文章：

How to get the number of pixels a user has scrolled down the page?

基本上确定用户多远滚动，该值与您的“黑盒”的高度，然后让JS应用类或使用类似jQuery来hide（）或show（）。

Answer 3

您可以使用JQUERY。

假设您正在滚动页面。

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

LIVE DEMO

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