2016-04-14 4 views
0

Ich möchte einen Effekt für die Navigation erstellen (Beispiel:). Ich möchte die Navigation jedes Mal, wenn ich die Seite am unteren Rand des Bildschirms aktualisieren, und wenn es nach unten scrollt, um nach oben zu bleiben. Irgendwelche Vorschläge bitte?HTML-Navigation auf der Unterseite des Bildschirms und bleiben Sie nach oben

+1

Willkommen bei Stackoverflow. Sie wissen es wahrscheinlich nicht, aber das ist kein Code-Schreibdienst. Bitte fügen Sie einen Code ein, um Ihr Problem neu zu erstellen. http://StackOverflow.com/Help/Mcve – Aaron

Antwort

1

Befestigen an dem Scroll-Ereignisse einen Ereignis-Listener, und wenn die Bildlaufposition größer als die gewünschten Position ist, um eine Klasse zu dem nav Elemente hinzuzufügen, die zu positionfixed und top zu 0 es setzt.

+0

Ihre Antwort funktioniert nur für eine einzelne Auflösung, wenn der Bildschirm seine Größe geändert hat die gediehene Position ändert. Also ich möchte es dynamisch herausfinden, wann das festgelegte Attribut der Position gesetzt wird. –

+0

Nein. Ihre Logik funktioniert nur für eine einzige Auflösung. Anstatt einen bestimmten Wert als Triggerpunkt fest zu codieren, verwenden Sie eine dynamische Position, z. B. die Höhe des Ansichtsfensters minus der äußeren Höhe der Navigationsleiste. Dieser Wert muss jedes Mal berechnet werden, wenn das Bildlaufereignis aufgerufen wird (oder nur während der Orientierungsänderung/Größenänderung/Ereignisse laden). – Quantastical

0

theme.co Website, ein Ereignis zuordnen Ereignis blättern, und o Entfernen CSS-Klasse (http://theme.co/x/wp-content/themes/x-child-custom/framework/js/x-custom.js) hinzufügen:

$window.scroll(function() { 
     var $menutop = $navbarWrap.offset().top - $navbar.outerHeight(); 
     var $current = $this.scrollTop(); 
     if ($current >= $menutop) { 
     $navbar.addClass('x-navbar-fixed-top'); 
     } else { 
     $navbar.removeClass('x-navbar-fixed-top'); 
     } 
    }); 
Verwandte Themen