바닥 글

Question

How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain point

내가 부동 메뉴 링크에서 코드를 사용에서 부동 (슬라이딩) 사업부를 중지하는 방법에 대해 설명합니다. 그것은 머리글에서 정지 부동 소수점을 중지하는 방법을 가지고 있지만 바닥 글에서는 중단하지 않습니다. 바닥 글에서 멈추도록이 코드를 어떻게 수정할 수 있습니까?

//// CONFIGURATION VARIABLES: 

var name = "#sidebar"; 
var menu_top_limit = 0; 
var menu_top_margin = 0; 
var menu_shift_duration = 500; 
var menuYloc = null; 
/////////////////////////////////// 

$(window).scroll(function() 
{ 
// Calculate the top offset, adding a limit 
offset = menuYloc + $(document).scrollTop() + menu_top_margin; 

// Limit the offset to 241 pixels... 
// This keeps the menu out of our header area: 
if(offset < menu_top_limit) 
    offset = menu_top_limit; 

// Give it the PX for pixels: 
offset += "px"; 

// Animate: 
$(name).animate({top:offset},{duration:menu_shift_duration,queue:false}); 
}); 

나는 바닥 글에서 정지하도록되어 다른 유사한 코드를 가지고 있지만, 작동하지 않습니다 :

var name = "#sidebar"; 
var menuYloc = null; 
var footer = '#footer'; //Specify the ID for your footer. 

$(document).ready(
    function() 
    { 
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
     $(window).scroll(
      function() 
      { 
       var offset = menuYloc + $(document).scrollTop(); 
       var anotherOffset = offset; 

       var docTop = $(window).scrollTop(); 
       var footerTop = $(footer).offset().top; 

       var maxOffset = footerTop - $(name).height() - 20; 
       var minOffset = docTop; 

       offset = offset > maxOffset ? maxOffset : offset; 
       offset = offset < minOffset ? minOffset : offset; 

       $(name).animate({top:offset + 'px'},{duration:500,queue:false});  
      } 
     ); 
    } 
); 

Answer 1

당신이 바닥 스크롤에 바닥 글을 유지하는 방법을 찾고 있다면 중간, 난 그게 내 블로그 게시물을 참조하십시오 (아래의 섹션에서 "웹 페이지에")로 이동 http://www.jimleo.com로 이동하십시오. 당신이 항상 볼 수있는 페이지 바닥 글을 원하는처럼

http://jimleonardo.blogspot.com/2009/02/jimleocom-is-back-up-some-how-to.html

Answer 2

는 소리가 난다. 두 개의 절대적인 요소를 만드는 것이 훨씬 쉽지는 않을 것입니다. 하나는 페이지의 맨 위에, 다른 하나는 맨 아래에 만듭니다. 그리고 너비/높이가 100 % 인 div에 모든 콘텐츠를 추가하십시오 (javascript를 사용하여이 작업을 수행해야합니다).

그러면 본문의 스크롤 이벤트에 물건을 연결할 필요가 없습니다. (매우 좋지는 않습니다.)

내용 앞뒤에 오프셋이나 줄 바꿈을 추가하면 시도보다 훨씬 잘 작동합니다.

나는 my own page here으로 해냈습니다.