問題描述

我想了兩種不同的方法來解決這個問題，但我需要幫助.

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

1. 滾動到部分，然后粘住.
2. 在滾動時隱藏元素，然后在到達(dá)頁面點(diǎn)后取消隱藏元素.

我該怎么做?

我目前正在使用 stickyjs.

但我沒有看到執(zhí)行我所要求的功能.

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

推薦答案

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

這是自定義js

在這個演示中，標(biāo)題變?yōu)榫G色(fixed)，當(dāng)你到達(dá)藍(lán)色時，div 變回normal，當(dāng)你是從藍(lán)色 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()
});

這篇關(guān)于HTML——我怎樣才能“堅(jiān)持"?到達(dá)頁面上的特定部分后我的導(dǎo)航欄?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！