HTML - 如何在頁面上的特定部分「粘貼」我的導航欄？

Question

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

1. 滾動到部分，然後堅持下去。
2. 在滾動時隱藏元素，然後在到達頁面上的點後取消隱藏元素。

我該怎麼做？

我使用stickyjs目前。

，但我看不出做什麼，我問了一個功能。

Answer 1

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

這是自定義的JS

在此

演示標題更改爲綠色（fixed），當你到達藍div更改回normal和當u是出從藍色DIV它變回fixed

填充被添加到div中，它不會影響窗口SCRO LL時改爲固定

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

Answer 2

可以使用jquery-waypoints插件此。

Demo