HTML - 如何在到达页面上的特定部分后“粘贴”我的导航栏？

Question

我想到了两种不同的方法来解决这个问题，但我需要帮助。

1. 滚动到部分，然后坚持。
2. 滚动时隐藏元素，然后在到达页面上时取消隐藏元素。

我该怎么做？

我目前正在使用stickyjs。

但我没有看到做我问的功能。

Answer 1

您可以使用jquery-waypoints插件。

Demo

Answer 2

演示 - http://jsfiddle.net/m6q6j8xL/3/

这是自定义js

在此演示中，标题更改为绿色（fixed），当您达到蓝色div时更改回normal，当您离开蓝色div时，它会更改为fixed

填充添加到div，以便在更改为固定

时不影响窗口滚动

var stickyNavTop = $('.header').offset().top;

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

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

    if (scrollTop > stickyNavTop) {
        $('.header').addClass('sticky');
        $('.container').css('padding-top', '100px');
    } else {
        $('.header').removeClass('sticky');
        $('.container').css('padding-top', '0');
    }
};

stickyNav();

$(window).scroll(function () {
    stickyNav();
    scrolling()
});