Ich habe eine sticky navbar für ein subnav erstellt, die am oberen Rand des Bildschirms bleiben sollte, wenn der Benutzer nach unten scrollt. Deshalb habe ich Javascript versucht, welches die Position auf "Fixed" ändert, wenn der Top erreicht ist. Um eine Lücke im Inhalt zu vermeiden, wenn die Navigationsleiste aus dem Fluss genommen wird, habe ich auch einen Platzhalter hinzugefügt, der dieselbe Höhe wie die Navigationsleiste hat.sticky navbar funktioniert nicht auf mobile während scroll
Auf dem Desktop funktioniert es wirklich und sieht aus, wie es sein sollte. Aber ich habe ein "Touch" Problem in der mobilen Ansicht. Wenn ich in der mobilen Ansicht nach unten scrolle, erscheint die Navigationsleiste nicht während des Scrollens über den Blickwinkel, wo sich die CSS-Klasse ändert. Es erscheint nur, wenn ich nach diesem Blickpunkt nicht mehr scrolle. Wenn es angezeigt wird, kann ich normalerweise nach oben und unten scrollen und ich bekomme dieses Problem nur noch einmal, wenn ich diesen Vorgang wiederhole, wo die Navbar die CSS-Klasse ändern muss. Es könnte also ein Problem mit der CSS-Klassenänderung sein und ich vermute, dass das Problem im JavaScript-Snippet liegen könnte. Kennt jemand eine Lösung dafür? Ich möchte das gleiche Verhalten wie auf der Desktop-Ansicht haben, so dass die Navigationsleiste immer sichtbar ist und nur am oberen Bildschirmrand fixiert wird, selbst wenn sie im Scroll-Fluss ist.
JS:
var menu = document.querySelector('#irp-localnav');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
Wenn Sie einen Fehler in der HTML/CSS Markup erraten, lass es mich wissen, so dass ich wieder mit Ihnen in Kontakt mit diesem Markup
Mit freundlichen Grüßen
Entsendung