Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Navigation beim scrollen ändern“

K

kingernie

Guest

Hallo ihr Mitglieder,

ihr könnt mir doch bestimmt helfen. Möchte gerne, dass sich meine oben am browser fixierte Navigation beim runterscrollen ändert.
Sprich, die Schriftgröße soll sich ändern, der slogan verschwinden und das Logo ein bisschen größer werden.
So ähnlich wie auf der Seite von Dr. Web http://www.drweb.de/
 

patrick_l

Hat es drauf

Am einfachsten geht es mit JS (jQuery). In deinem CSS eine Klasse mit gewünschten Werten definieren und anschließend mit einer "if or else" Abfrage hinzufügen oder entfernen. Hier mal ganz simple.

HTML:
<!doctype html>
<html>
<head>
    <title>Sticky Nav Example</title>
    <meta charset="utf-8">
</head>
<body>
    <nav class="primary-nav" role="navigation">
        <ul>
            <li><a href="#">example 1</a></li>
            <li><a href="#">example 2</a></li>
            <li><a href="#">example 3</a></li>
        </ul>
    </nav>
    <!--/ more -->
</body>
</html>
Javascript:
$(document).ready(function() {
    var stickyNavTop = $('.primary-nav').offset().top;
  var stickyNav = function(){
    var scrollTop = $(window).scrollTop();
     
    if (scrollTop > stickyNavTop) { 
    $('.primary-nav').addClass('sticky');
    }
    else {
    $('.primary-nav').removeClass('sticky'); 
    }
};

stickyNav();
$(window).scroll(function() {
    stickyNav();
});
});

Nicht vergessen jQuery einzubinden. Wenn dir das so nicht reicht, einfach mal nach Sticky-Nav und der gleichen suchen.

Edit:
Habe dir hier nochmal zwei andere Beispiele für dich herausgesucht.
- ScrollToTop then fixed navigation effect with jQuery and CSS
- codyhouse.co - Secondary Fixed Navigation

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben