OnScroll Navbar在Bootstrap 3中修改？

我在大學的學生，想知道什麼是說我想在一個項目上使用該使用情況下，最好的解決辦法：OnScroll Navbar在Bootstrap 3中修改？

標準navbar navbar-default navbar-fixed DIV內部具有nav navbar-nav navbar-right股利。在左側有一個標識http://www.bootply.com/8PW9UzYPOo

將滾動上的一個navbar-brand元素替換爲包含標識http://www.bootply.com/Q3NXBLXWBN的單詞。

我想不知道JavaScript會是解決方案，但我不確定。

僞代碼

If scroll beyond x pixels 
hide logotype <a> link 
replace with text <a> link 
text as class="navbar-brand"

我已經看到了在其他網站上的例子，但它是在這個example的Drupal的模塊和標識簡單地消失了，而不是替代。

來源

2016-04-15 GeorgeWL

找到關於谷歌播放有很多現成的代碼f或者這個 –

有一些選擇，所以想要更多的建議是最穩定的。也不確定要搜索的條款。 – GeorgeWL

看到這個例子http://jsfiddle.net/gxRC9/501/ –

只需將元素添加類和比它

例如

$(window).scroll(function(){ 
    var sticky = $('.navbar-fixed-top'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= 100) sticky.addClass('fixed'); 
    else sticky.removeClass('fixed'); 
});

發揮比與該類

.logo-text { 
    display:none; 
} 
.fixed .logo-text { 
    display:block; 
} 
.fixed .logo-img { 
    display:none; 
}

working example

來源

2016-04-15 12:16:04

但有一件事，navbar品牌不能很好地處理圖像，所以最好添加在同一時間固定。怎麼會這樣？ – GeorgeWL

.logo-img> img {//你的css在這裏} –

看到這個http://www.bootply.com/SHsUBaifnM –

OnScroll Navbar在Bootstrap 3中修改？

回答

相關問題