導航欄固定位置停留在頂部而標題消失

我想使導航欄位置固定。在頁面的頂部，導航欄應該位於頁眉的下方，並且當頁眉不再可見時向下滾動後，導航欄應該位於頁面的頂部。我怎樣才能做到這一點？當我在導航欄和頁面頂部之間滾動後嘗試執行操作時，仍然是標題的高度（儘管它不再可見）。導航欄固定位置停留在頂部而標題消失

這裏是我的CSS：

header{ 
    background-color: red; 
    width: 100%; 
    height: 100px; 
} 
nav{ 
    position: fixed; 
    float:left; 
    height: 100px; 
    width: 100px; 
    margin-left: 10px; 
    margin-right: 50px; 
    margin-top:50px; 
    background-color: green; 
} 
main{ 

background-color: blue; 
height: 1500px; 
margin-left:15%; 
margin-right:5%; 
margin-top:50px; 

}

和jfiddle：https://jsfiddle.net/pg2kwk5e/

來源

2016-01-07 matip

只是爲了澄清，你想這兩個導航欄和標題滾動時會出現？ –

我希望導航欄始終可見並且頁面只在頁面滾動到頂部時纔會顯示 – matip

您必須使用javascript才能實現該功能 –

您可以滾動一定量後一類添加到nav元素與JavaScript。

我已經使用Jquery，因爲它更快，更容易在操作中顯示此功能。

Example

我只是添加類.fixedTop到nav窗口滾動後超過150個像素，類本身只是有top:0;margin0;到絕對定位的元素移動到頂部和除去是餘量之前設置。

代碼：

var $nav = $("nav"), 


$(window).scroll(function() { 
    if($(this).scrollTop() > 150) { 
    $nav.addClass('fixedTop'); 
    } else { 
    $nav.removeClass('fixedTop'); 
    } 

})

CSS：

.fixedTop { 
    top: 0; 
    margin: 0 !important; 
}

來源

2016-01-07 16:52:14

太好了，謝謝！但是如果我希望導航欄移動得更加順暢，並且頭部至少在某些部分可見時，我希望導航欄始終位於其下50px，該怎麼辦？ – matip

你可以應用一個轉換，所以當'navbar'移動到它的位置時，它就會突然變成類似'transition：所有0.2s緩動的東西';'都能正常工作，我已經將它添加到了示例中。至於它始終是50px下im不知道有一個簡單的CSS解決方案。 –

導航欄固定位置停留在頂部而標題消失

回答

相關問題