如何根據用戶在頁面上滾動多遠來讓對象顯示和消失？

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