HTML——我怎样才能“坚持"?到达页面上的特定部分后我的导航栏? [英] HTML -- How can I "stick" my navbar after reaching a specific section on page?

问题描述

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

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

这篇关于HTML——我怎样才能“坚持"?到达页面上的特定部分后我的导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！