Question

这是我的JS FIDDLE

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

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

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

 $('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').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

Answer 2

我认为这可以解决您的问题

#footer {
        padding: 20px 0;
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 15000;
    }

计算身体的高度

2 个答案: