2017-07-05 2 views
0

Ich habe mich gefragt, wie ich die Nav-Bar blinken lassen kann, während ich die Spitze trete.Blinken nav, wenn Sie die Oberseite schlagen

Ich benutze bootstrap navbar und ein jquery-Skript, damit es beim Scrollen nach oben bleibt, aber ich kann es nicht blinken lassen, ohne jquery ihre "Fadein/Out" -Funktion zu durchlaufen.

Alle anderen Optionen, die ich verwenden kann?

$(function(){ 

    var advancedNav = $('#custom-bootstrap-menu').offset().top; 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > advancedNav) { 
       $('#custom-bootstrap-menu').css({position: 'fixed', top: '0px'}); 
       $('#custom-bootstrap-menu').css('display', 'block'); 
       $('#custom-bootstrap-menu').css('width', "100%");   
     } else { 
       $('#custom-bootstrap-menu').css({position: 'static', top: '0px'}); 
       $('#custom-bootstrap-menu').css('display', 'block'); 
     } 
    }); 

Antwort

0

Es ist wahrscheinlich, weil, wenn Sie die Position auf „fixed“ setzen Sie das Element aus dem Layout entfernen, damit die Fenster blättern ändern ..., was Sie die Höhe des Menüs berücksichtigen müssen für durch es in eine feste Höhe eingewickelt div. Versuchen Sie, diese ...

<div style="height: 400px"> 
<nav id="custom-bootstrap-menu">...</nav> 
</div> 
+0

Ja, aber das nav ist nicht an der Spitze, ich habe einen Header oben mit einem Logo im Inneren und ich möchte nicht eine andere erstellen blockieren, um es zu verbergen. Es bleibt oben, nachdem Sie nach unten geblättert haben und Sie können die Kopfzeile nicht mehr sehen. –

+0

Es muss nicht an der Spitze sein, es muss nur seinen Platz speichern, wenn es repariert wird ... und der beste Weg, dies zu tun ist es mit einer statischen festen Höhe div umgeben, könnte es andere Wege geben, manchmal Du musst die Höhe des Navs berechnen und die if-Anweisung innerhalb von min und min + height machen ... (anstatt nur minimal, wie es dein Code macht) – Ayyash

0

versuchen diese,

$(function(){ 

$(window).scroll(function(){ 
    if($(window).scrollTop() == 0) { 
      $('#custom-bootstrap-menu').css({position: 'fixed', top: '0px'}); 
      $('#custom-bootstrap-menu').css('display', 'block'); 
      $('#custom-bootstrap-menu').css('width', "100%");   
    } else { 
      $('#custom-bootstrap-menu').css({position: 'static', top: '0px'}); 
      $('#custom-bootstrap-menu').css('display', 'block'); 
    } 
}); 
Verwandte Themen