Hinzufügen/Entfernen einer Klasse mit jQuery beim Scrollen innerhalb einer div

Question

Ich habe ein Kind <div>, die position: fixed; angewendet hat, indem Sie eine Klasse von is-active hinzugefügt, wenn Sie über die Oberseite der übergeordneten <div> scrollen.

Ist es möglich, die Position des untergeordneten Elements am Ende des übergeordneten Elements zu fixieren, wenn Sie über das Ende des übergeordneten Elements hinaus blättern? Und dann wenden Sie die Klasse "ist-aktiv" auf das Kind erneut an, wenn Sie über das Ende des Elternteils hinaus scrollen?

Grundsätzlich möchte ich die feste Position des Kindes nur innerhalb seiner Eltern aktiv sein. Ich möchte erreichen, was position: sticky; kann ohne die Polyfill Overhead und fehlende Browser-Unterstützung. Ist das möglich?

Hier ist, was ich habe zur Zeit:

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

Hier ist Codepen mit einem Arbeitsbeispiel auch: https://codepen.io/abbasarezoo/pen/BwXBLv

Vielen Dank für jede Hilfe im Voraus!

Answer 1

ich es jetzt gerade geändert sticky Kopf arbeitet https://codepen.io/anon/pen/OxKPbj

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