HTML——我怎样才能“坚持"?到达页面上的特定部分后我的导航栏?

2022-01-10 00:00:00 jquery jquery-plugins navigation html sticky

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

I thought of 2 different methods to approaching this, but I need assistance.

  1. 滚动到部分，然后粘住.
  2. 在滚动时隐藏元素，然后在到达页面点后取消隐藏元素.

我该怎么做?

我目前正在使用 stickyjs.

但我没有看到执行我所要求的功能.

But I don't see a feature for doing what I asked.

推荐答案

demo - http://jsfiddle.net/m6q6j8xL/3/

这是自定义js

在这个演示中，标题变为绿色(fixed)，当你到达蓝色时，div 变回normal，当你是从蓝色 div 出来，它变回 fixed

in this demo the header changes to green(fixed) and when you reach to blue div changes back to normal and when u are out from the blue div it changes back to fixed

将填充添加到 div 以便在更改为固定时不会影响窗口滚动

padding is added to div so that it doesn't effect window scroll when changed to fixed

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

相关文章