Question

我试图让这个div停在底部，但由于某种原因，一旦它到达底部，它就会开始跳跃。

有什么想法吗？即使bottom_offset < 181它仍然不断更改css top属性，似乎也是如此。

    <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＆lt; 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);
    }
});
});

使滚动div停在底部

2 个答案: