如何具有兩種不同類型的導航欄，其中一種是固定的，一種是靜態的，具有不同的菜單項？

Question

我們如何在網站https://ooomf.com/上固定具有相同行為的導航欄，並同時具有兩種不同類型的菜單項。

例如，在上面的網站上，它們具有故事，工作原理，博客和登錄，位於頂部菜單，當您在固定菜單中向下滾動時，“登錄”將替換為“啟動項目”按鈕。

我們如何在bootstrap 3中使用css / jquery做到這一點？

幫助將不勝感激。

謝謝。

Answer 1

它稱為粘性導航欄。 現在您可以找到許多這種變化，但是這里是一個簡單的教程。

講解

Answer 2

您只需使用Afix在bootstrap中應用

$('#navbar').affix({
  offset: {
    top: 50
  }
});

通過數據屬性更新要輕松地將詞綴行為添加到任何元素，只需將data-spy =“ affix”添加到要監視的元素。 使用偏移量定義何時切換元素的固定。

<div data-spy="affix" data-offset-top="60">
  ...
</div>

您可以在需要顯示時在data-offset-top="200"進行設置。 這是例子

演示http://jsfiddle.net/6P5sF/56/

參考： http : //getbootstrap.com/javascript/#affix

Answer 3

這是一個帶有2個導航欄的示例。 用戶滾動到頂部標題上方后， affix組件將第二個導航欄固定在頂部。 您可以使用CSS z-index將第二個導航欄放在第一個導航欄上...

http://www.bootply.com/118680

#topNav {
    z-index:-1;
}

#nav {
  width: 100%;
  position:static;
  top:-32px;
}

#nav.affix {
   position: fixed;
   top: 0;
   z-index:10;
   -webkit-transition: all .6s ease-in-out;
}