Style deine Navigation so wie du es schön findest. Sobald du scrollst und eine bestimmte Höhe erreich hast, kannst du deine Navigation im Zustand verändern. Du kannst sie in der Position fix machen, ihr eine andere Farbe geben, sie verkleinern oder alle Dinge machen, die per CSS möglich sind.
Du fügst das JavaScript in deinen Headbereich ein. Vergiss nicht die Einbingung von jQuery (Findest du auf der Übersichtsseite).
Über diesen Wert .scrollTop() > 175; kannst du die Höhe beliebig bestimmen.
Ab diesem Wert wird der Navigation die Klasse .sticky gegeben, die du nun per CSS auch beliebig stylen kannst.
Los gehts!
JavaScript
jQuery(document).ready(function($) {
function sticky()
{
var window_top=$(window).scrollTop() > 175;
var top_position=$('body').offset().top;
var element_to_stick=$('#navi');
if (window_top > top_position) {
element_to_stick.addClass('sticky');
} else {
element_to_stick.removeClass('sticky');
}
}
$(window).scroll(sticky);
sticky();