플로팅 메뉴가 페이지 하단에 닿기 전에 멈춤

Question

사용자가 페이지를 아래로 스크롤 할 때 플로팅 메뉴 (절대적으로 배치 됨)가 표시되는 경우 문제가 생깁니다. 페이지 바닥에 오는 길은 바닥 글과 충돌합니다.

나는 페이지의 맨 아래에서 400px라고 말하고 싶다. 할 수 있다면 누구에게 알 수 있습니까? 사전에

var name = "#about"; 
var menuYloc = null; 

$(document).ready(function(){ 
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
    $(window).scroll(function() { 
     var offset = menuYloc+$(document).scrollTop()+"px"; 
     $(name).animate({top:offset},{duration:500,queue:false}); 
    }); 
}); 

감사 : 여기

코드입니다!

라이언

Answer 1

하나는이 아무튼 있도록 '바닥 글'의 양을 계산 볼 수 후 바닥 글 위 # 정보를 배치 할 필요가

그것을 숨기지 않습니다. 나는 다음 코드는 트릭을 할해야한다고 생각 :

var name = "#about"; 
var menuYloc = null; 
var footer = '#yourFooterId'; //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});  
      } 
     ); 
    } 
); 

편집 1 :

위의 코드에서 버그를 수정합니다. 이제는 효과가있다.

편집 2 :

업데이트 데모 코드, 그것은 모든 브라우저에서 작동합니다.

메뉴를 떠 항상 오프셋 (offset) 최소를 계산하여 볼 수 있는지 확인 만들기 :

EDIT 3 [이전 데모 코드는 'CONSOLE.LOG'당신이 파이어 폭스를 사용하지 않는 경우 실패 할 수있는 전화를했다]. 녹색 부동 사업부가 적용 그런 논리가없는 반면

레드 부동 사업부는 항상 바닥 글 위에 남아 :

Demo Page Code

이 데모의 모습을 어떻게

Check the demo →

.

Answer 2

은 (안된) 이런 식으로 뭔가를 시도 :

var name = "#about"; 
var menuYloc = null; 

$(document).ready(function(){ 
    var menu = $(name); 
    menuYloc = parseInt(menu.css("top").substring(0,menu.css("top").indexOf("px"))); 
    var height = parseInt(menu.attr('offsetHeight') + (parseInt(menu.css('marginTop')) || 0) + (parseInt(menu.css('marginBottom')) || 0)); 
    var footerYLoc = $('#footer').offset().top; 
    $(window).scroll(function() { 
     var offset = menuYloc+$(document).scrollTop(); 
     if ((offset + height) >= footerYloc) offset = footerYloc - height; 
     menu.animate({top:offset+"px"},{duration:500,queue:false}); 
    }); 


});