Erledigt - Navigation beim scrollen ändern

kingernie · 29.03.2015

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 · 29.03.2015

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

Enigmon · 30.03.2015

@patrick_l:
Danke für die Links!!