jquery - 计算 body 的高度

Question

这是我的 JS FIDDLE

我有一个包含不同元素的页面。 这些元素在某个滚动位置将它们的位置“固定”更改为“绝对”。

问题是我的高度。由于固定元素，它在我身上没有“自动”高度。所以我放了一个最小高度:例如 1000px。但它不是正确的解决方案...... 滚动条的大小会在您滚动时发生变化，我希望主体覆盖我的所有元素。

也许我必须在开始时计算没有固定元素的 body 高度？

 $('body').css({scrollTop:$(document).height() + $(window).height()});

我试过了，但是没用...

$(document).ready(function() {

  $('body').css({
    scrollTop: $(document).height() + $(window).height()
  });

  var windw = this;

  $.fn.followTo = function(pos) {
    var $this = this,
      $window = $(windw);

    $window.scroll(function(e) {
      if ($window.scrollTop() > pos) {
        $this.css({
          position: 'absolute',
          top: pos
        });
      } else {
        $this.css({
          position: 'fixed',
          top: 0
        });
      }
    });
  };

  $('h1').followTo(400);

  $('.two').followTo(350);
});

Answer 1

如果我明白您的意思，您希望 body 元素将页面中的所有 div 包装起来，无论它们是固定定位还是绝对定位，对吗？

好吧，如果是的话，您可以尝试使用这个非常硬编码的解决方案，通过添加每个 div 的高度(包括其垂直边距)来计算 body 的高度。

所以不要这样做:

$('body').css({scrollTop:$(document).height() + $(window).height()});

你可以这样做:

var totalOneHeight = $('.one').height() + parseInt($('.one').css('marginTop'));
var totalTwoHeight = $('.two').height() + parseInt($('.two').css('marginTop'));
var totalHeight = totalOneHeight + totalTwoHeight;
$('body').css({'height': totalHeight});

当然，这是一个非常硬编码的解决方案，因此如果您打算向页面添加更多内容，请记住将元素添加到总和中。

我使用 .css('marginTop') 获取元素的 marginTop，被 parseInt() 包围，因为之前的方法也返回单位 (px) .

编辑:以防万一你想知道，如果你添加 marginBottom 你也应该把它放在总和中

尝试解决方案 here