OnScroll Navbar in Bootstrap 3 ändern?

Question

Ich bin ein Student an der Universität und fragt, was ist die beste Lösung für diesen Anwendungsfall, dass ich an einem Projekt verwenden, bin zu wollen:

Standard-navbar navbar-default navbar-fixed div mit einem nav navbar-nav navbar-right div in seinem Innern. das hat ein Logo in der linken Seite http://www.bootply.com/8PW9UzYPOo

, die auf Blättern durch ein navbar-brand Element ersetzt wird, das die Wörter des Logos http://www.bootply.com/Q3NXBLXWBN enthält.

Ich denke irgendwie, dass Javascript die Lösung wäre, aber ich bin mir nicht sicher.

---

Pseudo-Code

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

---

Ein Beispiel, das ich auf einer anderen Website gesehen habe, aber es ist ein Modul von Drupal auf diesen example und das Logo verschwindet einfach nicht ersetzt.

Answer 1

Fügen Sie einfach Klasse auf Ihrem Element und als mit ihm spielen

zum Beispiel

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

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

und als spielen mit dieser Klasse

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

working example