Question

假设有一个高度为1000px的div，文档正文的高度为2000px。我的屏幕为700px。现在，当我滚动页面时，我想滚动身体和div。但当div的结尾出现在屏幕上时，它应该固定，不应再滚动，但窗口或正文可以滚动。当我再次以精确的1000px向上滚动时，应该移除固定位置。

我试图让这件事情从早上开始，但无法得到任何想法。请看一下我的代码：

var fixmeTop = $('div').height();
var windowHeight = $(window).height();
var heightDiff = Math.abs(windowHeight - fixmeTop);


$(window).scroll(function() {

  var currentScroll = $(window).scrollTop() + windowHeight;

  if (currentScroll >= fixmeTop) {
    $('div').css({
      position: 'fixed',
      bottom: '0',
      top: 'auto'
    });
  } else {
    $('.site-content .widget-area').css({
      position: 'absolute',
      top: '0',
      bottom: 'auto'
    });
  }

});

body {
  height: 2000px;
  background: #000;
}
div {
  height: 1000px;
  background: red;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>

  </div>
</body>

Answer 1

几天前我处理过类似的问题，我在github上找到了this jQuery插件。它效果很好，试一试。

当滚动文档时，如果它的结尾出现在屏幕上则修复div - 使用jquery

1 个答案: