javascript - 在 div 内滚动时使用 jQuery 添加/删除类

Question

我有一个 child <div>其中有 position: fixed;通过添加一类 is-active 来应用当你滚动到它的父元素的顶部时 <div> .

当您滚动到父级末尾之外时，是否可以固定子级在父级末尾的位置？然后当您向上滚动到父项末尾上方时，将“is-active”类重新应用到子项？

本质上，我希望子项的固定位置仅在其父项中处于事件状态。我想实现什么position: sticky;可以在没有 polyfill 开销和缺乏浏览器支持的情况下完成。这可能吗？

这是我目前拥有的:

HTML:

<div class="outer">
    <div class="nav">
    </div>
</div>
<div class="end">
</div>

CSS:

.outer {
    position: relative;
    width: 100%;
    height: 200rem;
    margin: 10rem 0 0;
    background: red;
}

.end {
    width: 100%;
    height: 40rem;
    background: green;
}

.nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 10rem;
    height: 30rem;
    background: blue;

    &.is-active {
        position: fixed;
        top: 2rem;
        left: 2rem;
    }

}

jQuery:

var $nav = $('.nav');
var $outer = $('.outer');

$(function(){
  $(window).scroll(function() {
    var $scroll = $(window).scrollTop();
    var $parentOffset = $outer.offset().top;
    var $parentHeight = $outer.height();
    var $navHeight = $nav.height();
    if($scroll > $parentOffset && $scroll < ($parentHeight - $navHeight)) {
      $nav.addClass('is-active');
    }
    else {
      $nav.removeClass('is-active');
    });
});

这是 Codepen，还有一个工作示例:https://codepen.io/abbasarezoo/pen/BwXBLv

提前感谢您的帮助!

Answer 1

我刚刚更改了它，现在粘性 header 可以正常工作了 https://codepen.io/anon/pen/OxKPbj

if($scroll > $parentOffset && $scroll ) {
                    $nav.addClass('is-active');
            }