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

我有一个孩子

，他的

位置是固定的应用的代码>在滚动通过其父类
顶部时处于活动状态

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

基本上，我希望子对象的固定位置仅在其父对象中处于活动状态。我想达到什么
位置：粘性不需要polyfill开销和缺少浏览器支持。这可能吗

以下是我目前拥有的：

HTML:

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

var$nav=$（'.nav'）；
变量$outer=$（'.outer'）；
$（函数（）{
$（窗口）。滚动（函数（）{
var$scroll=$（window.scrollTop（）；
var$parentOffset=$outer.offset（）.top；
var$parentHeight=$outer.height（）；
var$navHeight=$nav.height（）；
如果（$scroll>$parentOffset&&$scroll<（$parentHeight-$navHeight））{
$nav.addClass（'is-active'）；
}
否则{
$nav.removeClass（'is-active'）；
});
});

下面是代码笔，还有一个工作示例：

提前感谢您的帮助！
我刚刚更改了它，现在粘性标题正在工作

这可能会有帮助-->这不起作用，子div会使类超过父div的末尾。请添加您试图生成的内容的详细信息/上下文。@VarunJain我希望一个div在父div的参数内浮动。
.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;
    }

}

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

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