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.

推荐答案

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

这是自定义js

在此演示中，标题更改为绿色(fixed)，当您到达蓝色时div更改回normal，并且当u从蓝色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屋！