사용자가 페이지를 얼마나 크게 위나 아래로 스크롤했는지에 따라 개체를 표시하거나 사라지게하려면 어떻게해야합니까?

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를 사용할 수 있습니다. LIVE DEMO (행동 데모를 볼 수있는 오른쪽 하단 창을 스크롤) 등 .scroll() 및 scrollTop() 등

의 jQuery 방법이 필요한 모든 있습니다 - 여기

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

는 JSFiddle에 대한 예입니다. 그들은 당신의 삶을 편하게 해줄 것입니다.

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