아래쪽에서 스크롤 div를 멈추게하십시오.

Question

아래쪽에서 멈추도록이 div를 얻으려고하고 있지만, 바닥에 도달하면 덤핑이 시작됩니다.

아이디어가 있으십니까? bottom_offset < 181 여전히 CSStop 속성을 계속 변경하는 것처럼 보입니다.

<script> 
    jQuery(document).ready(function() { 
     var el = jQuery('#contactBox'); 
     top_offset = jQuery('#contactBox').offset().top - 60; 
     var box_height = el.height(); 

     jQuery(window).scroll(function() { 
     var scroll_top = jQuery(window).scrollTop(); 
     var bottom_offset = jQuery(document).height() - scroll_top - box_height; 
     var new_top_offset = jQuery(document).height() - box_height - 100; 

     if ((scroll_top > top_offset) && (bottom_offset > 180)) { 
      el.css('top', scroll_top - top_offset); 
     } 
     else if ((scroll_top > top_offset) && (bottom_offset < 181)) { 
      el.css('top', new_top_offset); 
     } 
     else { 
      el.css('top', ''); 
     } 
    }); 
    }); 
    </script> 

Answer 1

html과 CSS가 어떻게 설정되어 있는지 잘 모르겠습니다.

div가 고정 된 위치에 있으면 다음 코드를 제거하면 맨 아래에서 중지해야합니다.

new_top_offset은 맨 아래로 스크롤 할 때 div가 점프 다운되었습니다.

else if ((scroll_top > top_offset) && (bottom_offset < 181)) { 
      el.css('top', new_top_offset); 
     } 
     else { 
      el.css('top', ''); 

Answer 2

글쎄, 나는 조금씩 다르게 작동하도록 앞장서 서 그것을 바 꾸었습니다. 그것은 단지 보더 높이를 뺀 바디 높이를 계산할 것이고 스크롤 div의 스크롤 상단 + 높이를 수행 한 다음 CSS가 total_height 인 경우에만 변경합니다. < body_height.

누군가가 나중에 필요할 경우 코드가 있습니다.

jQuery(document).ready(function() { 
    var el = jQuery('#contactBox'); 
    top_offset = jQuery('#contactBox').offset().top - 60; 
    var box_height = el.height(); 

    jQuery(window).scroll(function() { 
    var scroll_top = jQuery(window).scrollTop(); 
    var total_height = scroll_top + box_height; 
    var body_height = jQuery('body').outerHeight() - 150; 

    if ((scroll_top > top_offset) && (total_height < body_height)) { 
     el.css('top', scroll_top - top_offset); 
    } 
}); 
});