jQuery / CSS - 在滚动时添加固定到元素并在到达元素末尾时将其删除

Question

这是我到目前为止的代码：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 120) {
        $("#FixedBox").addClass("fixed");
    } else {
        $("#FixedBox").removeClass("fixed");
    }
});

使用此代码在页面以120px滚动时，将类fixed添加到ID为FixedBox的元素。

我想要什么？

标识为FixedBox的元素包含在标识为Content的元素中。因此，当页面以120像素滚动时，我的脚本会将fixed类附加到FixedBox，这样就可以修复它。

当fixed到达FixedBox时，如何删除该Content课程？

以下是示例中的图片：

我如何实现这一目标？

我希望你能帮助我！

Answer 1

您可以创建一个函数来检查滚动高度是否在内容的开头和结尾之间，并相应地添加类。如果你有几个内容块，这甚至可以工作。

Live Demo （第三个内容框是目标）

HTML

<div class="content">
  <div class="box">
  </div>
</div>

<div class="content" id="target">
  <div class="box">
  </div>
</div>

CSS

.content{
  width: 100%;
  height: 400px;
  background: red;
  margin-bottom: 20px;
  position: relative;
}

.fixed{
  width: 100px;
  height: 100px;
  position: fixed;
  right: 10px;
  top: 10px;
  background: blue;
  display: block;
}

的jQuery

var content = $('#target');
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    var offset = content.offset();
    var height = content.height();
    if (offset.top <= scroll && scroll <= offset.top + height) {
      $('.box', content).addClass("fixed");
    } else {
      $('.box', content).removeClass('fixed');
    }
});

Answer 2

您可以通过$('#content').offset()中的$('#footer').offset()或where dummy like 'funny_'更多来查找内容的结尾。

当您计算元素和位置的高度时，您可以找出需要移除固定类固定类的最高阈值。请记住，当返回到DOM流时，您还需要更改FixedBox的非固定位置，否则它将快速回到起始位置。

Answer 3

`

var maxScroll = 120 + document.getElementById('#content').offsetHeight;
 if (scroll >= 120 && scroll <= maxScroll) {
     $("#FixedBox").addClass("fixed");
 } else {
     $("#FixedBox").removeClass("fixed");
 }

你只需要#content身高。