요소의 고정 위치?

Question

고정 된 위치로 요소를 변경하는 방법을 궁금 해서요. 높이를 변경하거나 웹 페이지의 특정 지점을 클릭하면 스타일이 변경됩니다. 다음은이 이벤트를 수행하는 사이트의 몇 가지 예입니다. 나는 정말로 그것이 어떻게 일어나고 이것에 관한 일이 궁금하다. 나는 많은 방법을 시도했습니다 https://www.yahoo.com/

http://www.animecenter.tv/

하지만 중 내가 뭔가를 잘못하고 있어요 또는 솔루션은 실제로 매우 간단하고 내가 생각하는 이상입니다.

HTML :

<header> 
    <div id="Logo"></div> 
    <nav> 
     <a href="#"><div class="alter-ref">exa</div></a> 
     <a href="#"><div class="alter-ref">exa</div></a> 
     <a href="#"><div class="alter-ref">exa</div></a> 
     <a href="#"><div class="alter-ref">exa</div></a> 
     <a href="#"><div class="alter-ref">exa</div></a> 
    </nav> 
</header> 

CSS :

header {  
    background-color:#247BC1;  
    width:100%; 
    height:80px; 
    border-bottom:1px solid #005fad; 
    position:fixed; 
    top:0;  
    left:0; 
} 

나는 명확하게 내가 원하는 효과를 않습니다, 시도했지만 한 그 진열장 위에 나열된 웹 사이트 :

$(document).ready(function(){    
$(window).scroll(function(){    
    if ($(this).scrollTop() > 100) {     
    $('.scrollup').fadeIn();    
    } 
    else {     
    $('.scrollup').fadeOut();    
    }   
});    

$('.scrollup').click(function(){    
    $("html, body").animate({ scrollTop: 0 }, 600);    
    return false;   
});  
}); 

(에릭 필립스가 추가)] (http://jsfiddle.net/TL927/2/)

Answer 1

가장 쉬운 방법 중 하나는 ScrollMagic과 같은 jquery 플러그인을 사용하여 웹 페이지의 특정 지점으로 스크롤 할 때 요소를 고정 할 수있게하는 것입니다.

또한 단순히 두 개의 별도의 코드, 고정 요소의 하나, 초기 고정되어 있지 요소의 하나가, 다음 코드를 전환 할 수 있습니다 때

display:none 

을 전환하여 특정 시점에 사용자가 스크롤 및

display:block.