0

我试图让这个 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>
4

2 回答 2

0

好吧，我继续进行了更改，使其工作方式有所不同。它只会计算正文高度减去页脚高度，并且还会滚动顶部 + 滚动 div 的高度，然后仅在 total_height < body_height 时更改 css。

如果将来有人需要，这是代码。

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);
    }
});
});
于 2013-10-30T20:56:49.017 回答
0

不确定 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', '');
于 2013-10-30T20:51:52.223 回答