festes Menü auf einem bestimmten Teil der Seite

Wie kann ich beim Scrollen eine Menüposition oben auf meiner Seite machen. Nun, ich kann das auf meinem Header tun. aber nicht auf einem bestimmten Teil der Seite.lets sagen mein anderes Menü ist Position auf einer 980px Höhe der Seite. Wenn ich versuche, position: fixed zu verwenden, wird das Menü einfach ausgeblendet. auch wenn ich z-index verwende. hier ist die visuelle:festes Menü auf einem bestimmten Teil der Seite

Quelle

2017-09-22 jmv

Code schreiben bitte. –

Wenn Sie nur CSS benötigen, können Sie versuchen, Position: sticky zu verwenden, aber unterstützt wahrscheinlich nicht zu groß/konsistent. Andernfalls müssen Sie wahrscheinlich Javascript verwenden, testen, wenn das Element die Spitze erreicht und sein Positionsattribut ändert. – SLL

@SLL können Sie mir zeigen, wie – jmv

hier ein mit einem Beispiel der Position codepen ist: klebrig und ein basisches jquery Beispiel. Denken Sie daran, dass es einige Support-Probleme gibt, aber Sie sind an diesem Punkt größtenteils in Ordnung. Aber es ist etwas zu prüfen, wenn Sie klebrig verwenden möchten. https://codepen.io/anon/pen/WZGxrm?editors=1111 (Kommentar entfernen Syntax einer Option oder die andere zeigen)

#otherMenu { 
    position: sticky; 
    top: 50px; 
}

50 Addiert für die Höhe des Kopfteils zu berücksichtigen:

var menu_position = $("#otherMenu").offset().top; 

$(window).on('scroll', function() { 
    if (($(document).scrollTop() + 50) >= menu_position){ 
$("#otherMenu").css({"position":"fixed", "top":"50px"}); 
    } else { $("#otherMenu").css({"position":"static", "top":"auto"}); 
    } 
});

Quelle

2017-09-22 05:59:51 SLL

das funktioniert völlig. aber das Problem ist Scrollen! es geht nicht in seine ursprüngliche Position zurück – jmv

@jmv Ich habe den Codepen für die Rückkehr des Menüs aktualisiert, wenn ich nach oben scrolle. Dies ist nur ein Anfang, abhängig davon, was Sie tun möchten. Die Suche nach "fixed header on scroll" oder "jquery sticky header" usw. kann Ihnen bei Bedarf weiterhelfen. – SLL

hab es jetzt! danke Mann das ist alles was ich brauche. – jmv

sicher sein, dass kein Überlauf ist: auf dem Kopfbehälter versteckt

Quelle

2017-09-22 04:00:23 rafon

gibt es keinen Überlauf: versteckt. Ich schätze, was ich suche die Position: klebrig. aber es scheint nicht zu funktionieren – jmv

festes Menü auf einem bestimmten Teil der Seite

Antwort

Verwandte Themen