Question

这是笔......

jQuery的'if'部分工作，并且当#header等于或低于0时将.fixed类添加到#header，但是当headerTop高于0时，它不会删除它，'else'。我无法弄清楚这里发生了什么。 JS newb在这里，我想了解如何让它工作。谢谢。

HTML

<div class="content">
  <div id="header"></div>
</div>

CSS

body {
    overflow-x: hidden;
    margin: 0;
}

#header {
    width: 100%;
    height: 80px;
    background: blue;
    z-index: 1;
}

.content {
    position: absolute;
    top: calc(100% - 80px);
    width: 100%;
    height: 200vh;
    background: linear-gradient(to bottom, red, yellow);
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    background: blue;
}

jQuery

$(window).scroll(function() {
    var top = $('#header').offset().top;
    var headerTop = (top - $(window).scrollTop());

    if (headerTop <= 0) {
        $('#header').addClass('fixed');
    } else {
        $('#header').removeClass('fixed');
    }

});

Answer 1

我需要获取父divs offset（）。top而不是实际的标头本身。这是基于父元素顶部位置的粘性标题的最终滚动函数。

http://codepen.io/jareko999/pen/bZXbWP

$(window).scroll(function() {
    var top = $('.content').offset().top;
    var headerTop = (top - $(window).scrollTop());

    $('#header').toggleClass('fixed', headerTop <= 0);
    console.log(headerTop);
});

修复了滚动时的标题位置 - 如果不能正常工作

1 个答案: