div 위치는 margin-top에서 고정됩니다 : 위로 스크롤 할 때 20px

Question

아래로 갈 때 바닥 글에서 위로 스크롤하면 40px까지 스크롤 할 때 창의 상단에서 20px로 고정하고 싶은 div가 있습니다. 내 코드가 일관성이 없어 보인다. 더 좋은 방법이 있어야한다. Page Link

$(document).scroll(function() { 
     if($(window).scrollTop() >= 345){ 
      $('#rightShipping').css({'position' : 'fixed', 'top' : '0px'}); 
     } 
     if($(window).scrollTop() <= 346){ 
      $('#rightShipping').css({'position' : '', 'top' : ''}); 
     } 
     console.log($(window).scrollTop()); 
    }); 

Answer 1

한 빠른 생각 - 나는 position: relative와 단지 #rightShippingtop: 20px 한과 부모를 떠나 .rightCol 블록을 제거합니다. 그리고이 코드를 사용 :이 작동하는지 나는 그것을 테스트하지 않은 내가 잠을 좀 필요로

$(document).scroll(function() { 

    var scrollTop = $(window).scrollTop(); 

    var offsetTop = $('#rightShipping').offset().top; 
    var positionTop = $('#rightShipping').position().top; 

    if (scrollTop >= offsetTop - positionTop) { 
     $('#rightShipping').css('position', 'fixed'); 
    } else { 
     $('#rightShipping').css('position' : 'relative'); 
    } 
}); 

난 정말 몰라,하지만 난 그게 도움이되기를 바랍니다.

행운을 빈다.