粘性标题，达到一定程度

Question

当div到达页面顶部时，我将一个“粘性”类添加到div中，将其css位置变为fixed。

当用户到达页面该部分的底部时，我想删除粘性类。

该标题仅与页面的一部分相关。

有关如何将其添加到我当前代码的任何想法？

<script>
    $(document).ready(function() {
        var stickyNavTop = $('.header').offset().top;

        var stickyNav = function(){
            var scrollTop = $(window).scrollTop();

            if (scrollTop > stickyNavTop) {
                $('.header').addClass('sticky');
            } else {
                $('.header').removeClass('sticky');
            }
        };

        stickyNav();

        $(window).scroll(function() {
            stickyNav();
        });
    });
</script>

Answer 1

JS Fiddle

使用此函数计算滚动是否到达页面末尾

当padding更改为container时，我已将header添加到fixed，因此document的高度保持不变

document height - window height会在滚动到达最后一个区域时为您提供值

function scrolling() {
    doc = $(document).height()
    win = $(window).height()
    height = doc - win
    if ($(window).scrollTop() >= height) {
        $('.header').removeClass('sticky');
        $('.container').css('padding-top', '0');
    }
}

修改

更改了函数以查找滚动是否在div和show hide

的范围内

如果滚动进入蓝色div的范围，它将变为正常，否则它将获得fixed

JS Fiddle

function scrolling() {
    doc = $(document).height()
    hidingtop = $('.hiding').offset().top;
    hidingbottom = $('.hiding').position().top + $('.hiding').outerHeight(true)
    if ($(window).scrollTop() > hidingtop && $(window).scrollTop() < hidingbottom) {
        $('.header').removeClass('sticky');
        $('.container').css('padding-top', '0');
    }
}