Navigationsmenü beim scrollen oben fixieren

Hallo Leute,

ich bin im Netz bereits öfter über (WordPress)Seiten gestolpert, bei denen das Menü horizontal unter einer Headergrafik liegt und mit hochschrollt, dann aber am oberen Bildrand fixiert wird und so immer sicht- und klickbar ist. Wie wird das umgesetzt? Mit reinem CSS? Oder braucht man da JS für?

Auf der Seite, auf ich das gerne umsetzen würde, müsste ich wohl den div#header-menu-wrap ansprechen, wenn euch das hilft. Diese ID finde ich im CSS 3x:

#header-menu-wrap {
    background: url(images/sprite_h.png) left -4px repeat-x #101010;
    position: relative;
}
.have-secondary-menu #header-menu-wrap {
    border-bottom: 1px solid #000;
}
.dropdown #header-menu-wrap {
    background: none;
    border: none;
}

Das ist der Theme-Standard, bei dem das Menü oben aus dem Bild verschwindet.

Wenn ihr mir verraten könnt, wie ich das Menü im sichtbaren Bereich halte, wäre das eine feine Sache.

LG,
Markus aka Cowboy

maxe Es geht um diese Seite: http://goo.gl/7Jp78i

SirEctor Danke, muss ich mir mal anschauen. Mit JS und jQuery habe ich bislang nicht viel gemacht.

LG,
Markus aka Cowboy

Eine Frage noch, SirEctor, kommt der Code in den Header der Seite? Also vor </head>? Oder könnte man das auch in den Footer packen? Genau so, wie es oben steht, erfüllt es zumindest im Header seine Funktion nicht.

<!-- Hauptmenu oben halten -->
<script>
    $(document).ready(function() {
        var top = $('#header-menu-wrap').offset().top;
        $(window).scroll(function() {
            if($(this).scrollTop() > top) {
                $('#header-menu-wrap').addClass('sticky-menu')
            } else {
                $('#header-menu-wrap').removeClass('sticky-menu');
            }
        });
    });
 </script>
 <!-- Hauptmenu oben halten -->
 
</head>

.sticky-menu {
    top: 0;
    position: fixed;
    z-index: 1000;
}

Danke und LG,
Markus aka Cowboy

Nun gut, ein bisschen ergänzt und mit jQuery, schon funktioniert es:

jQuery(document).ready(function($) {
        var stickyHeaderTop = $('#nav').offset().top;
        $(window).scroll(function(){ /*header-menu-wrap*/
            if( $(window).scrollTop() > stickyHeaderTop ) {
            $('#nav').addClass("sticky-menu");
            } else {
            $('#nav').removeClass("sticky-menu");
            }
        });
});

div.sticky-menu {
    top: 0;
    position: fixed;
    width: 960px;
    z-index: 1000;
}

Ich habe auch festgestellt, dass die anzusprechende ID #nav ist, die im CSS aber auch auf die Breite festgelegt werden muss. Das Script rufe ich im Footer auf. Bis hier her schon mal Danke für die Denkanstöße.

Was mich noch stört: Die Navigation verschwindet bei angemeldeten Usern hinter der Adminbar. Wie lässt sich das einstellen, dass die Navigation unter der Adminbar hängen bleibt? Trotz des Wissen, dass ich im PHP mit is_admin_bar_showing() die Anzeige der Adminbar abfragen kann, fehlt mir die Idee...

LG,
Markus aka Cowboy

Super! Das war genau das Richtige, helix. Vielen Dank!

Die Höhe der Adminbar ist übrigens 32px.

maxe: Wenn ich mich nicht irre, würde ich mit einem angepassten z-index das Menü über die Adminbar legen. Das ist jedoch nicht gewünscht, weil auch unerfahrene Benutzer an der Seite mitarbeiten und irritiert wären, wenn diese Leiste da oben (würden die sagen :-o) plötzlich nicht mehr da ist.

LG,
Markus aka Cowboy

Das ist das schöne an WordPress, es gibt viele Möglichkeiten. Derzeit wird niemand der Benutzer die Adminbar ausblenden, was künftig wird, keine Ahnung. Ich persönlich nutze sie gern.

Der Frage, welche Klassen WP setzen, sollte man in der Tat mal nachgehen.

LG,
Markus aka Cowboy

Hab mir mal den erzeugten Seitenquelltext angesehen. Bei eingeblendeter Adminbar bekommt der Body auch die Klasse "admin-bar", also wähle ich diese aus, statt "logged-in". Damit ist die Eventualität, dass jemand die Adminbar ausblendet, auch abgedeckt.

LG,
Markus aka Cowboy