在div中滚动时使用jQuery添加/删除类

Question

I have a child <div> which has position: fixed; applied by adding a class of is-active when you scroll past the top of it's parent <div> .

Is it possible to fix the position of the child at the end of the parent as you scroll beyond the end of the parent? And then re-apply the class 'is-active' to the child when you scroll back up above the end of the parent?

Essentially I'd like the fixed position of the child to only be active within it's parent. I want to achieve what position: sticky; can do without the polyfill overhead and lack of browser support. Is this possible?

Here's what I have currently:

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');
    });
});

Here's Codepen with a working example also: https://codepen.io/abbasarezoo/pen/BwXBLv

Thanks for any help in advance!

Answer 1

i just changed it now sticky header is working https://codepen.io/anon/pen/OxKPbj

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