페이지를 아래로 스크롤 한 후 요소 CSS 위치가 변경됩니다.

Question

나는 jquery로 그걸 알아 내려고 노력하고 있습니다.

절대 위치가 설정된 ul 탐색이 있지만 페이지를 200 픽셀 아래로 스크롤 한 후에 해당 위치가 고정되어 페이지 탐색이 항상 페이지에 유지됩니다.

어떻게하면됩니까? 아래

내가 여기

http://satbulsara.com/tests/

Answer 1

덕분에

이 내가

http://www.defringe.com/

http://satbulsara.com/tests/

Thankss에서 그것을 가지고

$(document).ready(function() { 
    var theLoc = $('ul').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('ul').hasClass('fixed')) { 
       $('ul').removeClass('fixed'); 
      } 
     } else { 
      if(!$('ul').hasClass('fixed')) { 
       $('ul').addClass('fixed'); 
      } 
     } 
    }); 
}); 

를 원했던 것입니다! !!!

Answer 2

작업 나는 "끈끈한"추가 기사를 만드는 데 사용하는 코드입니다하고있는 예이다. 마크 업에 맞게 ID를 수정해야합니다.

 
var sidebarScrollTop = 0; 

$(document).ready(function() { 
    sidebarScrollTop = $("#sidebar").offset(); 

    $(window).scroll(function() { 
     var docScrollTop = $('body,html').scrollTop(); 

     if(docScrollTop > sidebarScrollTop.top) { 
      $("#sidebar").css({ position: 'fixed', top: '0px' }); 
     } else { 
      $("#sidebar").css({ position: 'static' }); 
     } 
    }); 
}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#sidebar").offset().top; 
}); 

기본적으로, 당신이 오직 할 필요가있는 사이드 바 컨테이너의 ID에 대한 #sidebar을 변경할 수 있습니다. 이 코드는 사이드 바 요소가 화면 상단을지나 스크롤되는지 확인합니다. 그럴 경우 위치가 fixed으로 변경되고 다시 페이지로 돌아 오면 위치는 static (기본값)으로 되돌아갑니다.

$(document).resize() 및 $(window).resize() 함수는 문서/창이 각각 크기가 조정될 때 사이드 바가 페이지 상단에 고정되도록합니다. 문서 함수를 사용하면 요소 크기를 변경하는 jQuery 애니메이션이 있더라도 사이드 바가 제대로 작동합니다. 도움을 너무 빨리 것에 대해 모든 사람에게

Answer 3

나는 이것을하기 위해 this jQuery plugin을 썼다.