Question

当您滚动浏览其父级<div>的顶部时，我通过添加position: fixed;类来生成is-active个孩子<div>。

当您滚动到父项末尾之外时，是否可以将子项的位置固定在父项的末尾？然后重新申请课程“活跃”＃39;当你向后滚动到父母的末尾之上时，对于孩子？

基本上我希望孩子的固定位置只能在其父母中活跃。我想实现position: sticky;无需填充开销和缺乏浏览器支持即可完成的任务。这可能吗？

这是我目前所拥有的：

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

我刚刚更改了它现在粘性标头正常工作 https://codepen.io/anon/pen/OxKPbj

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

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

1 个答案: