jquery를 사용하는 역방향 스티키 스크롤러가 가능합니까?

Question

내가 요소는 다음 CSS를 사용하여 브라우저의 하단에 고정되는 웹 사이트의 효과를 만들려고 해요 :이 http://vertstudios.com/blog/demo/stickyscroller/demo.php 같은 것을 사용하는

div.featured-image { 
width: 100%; 
position: fixed; 
z-index: 10; 
} 

와 내가 일 할입니다 항목이 특정 지점을 지나서 UP 스크롤을 멈추게하십시오. 나는 사이트의 상단에 배치 된 로고를 절대적으로 배치하고, 브라우저의 키가 크지 않으면 고정 된 항목을 겹치기를 원하지 않습니다. 그래서 상단에 약 800px의 버퍼를 스크롤하지 못하게하려고하지만 여전히 페이지 하단에 고정되어 있습니다.

Answer 1

이 작업은 JQuery를 사용하여 scrollTop()을 기반으로 요소의 상단 및 하단 css 속성을 동적으로 설정/재설정 할 수 있습니다.

샘플 JQuery와 :

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) { 
    var scrollTop = $(window).scrollTop(); 
    if (scrollTop <= 550) { 
     $('#footer').css('bottom',''); 
     $('#footer').css('top','550px'); 
    } else { 
     $('#footer').css('top',''); 
     $('#footer').css('bottom','0px'); 
    } 
}); 

CSS (DIV 번호 바닥 글에 대한) :

#footer{ 
    position: fixed; 
    left: 0px; 
    display: block; 
    background-color: green; 
    z-index: 10; 
    height: 100px; 
    width: 100%; 
} 

그리고 작업 fiddle.