Scrollen Sie in einem Sticky-Header-Menü auf Mobilgeräten nach untenHTML

HTML-Programmierer
Guest
 Scrollen Sie in einem Sticky-Header-Menü auf Mobilgeräten nach unten

Post by Guest »

Ich möchte eine Standard-Kopfzeile für meine Website erstellen. Diese Kopfzeile sollte immer oben im Fenster angezeigt werden, unabhängig davon, wie weit ich auf der Seite nach unten scrolle. Ich habe position:sticky verwendet. Also ziemlich normales Zeug.
Mein Header hat eine einzige Menüschaltfläche. Wenn Sie darauf klicken, erscheint das detaillierte Menü, das die gesamte Bildschirmbreite einnimmt. Dieses Menü ist Teil des Header-Div und verfügt daher auch über die Eigenschaft position:sticky.
Hier ist eine Darstellung dessen, was ich zu tun versuche (nicht). den genauen Code, da er zu umfangreich wäre).

Code: Select all

$(".t3-menu").on("click",function(){
$(".t3-dropdown").toggle();
}
);

Code: Select all

    .t3-entete {
position: sticky; /* I also tried fixed and absolute to no avail*/
top: 0px;
left: 0px;
width: 100%;
z-index: 10;
}

Code: Select all



Menu

[list]
[*]A
[*]very
[*]very
[*]very
[*]very
[*]long
[*]list
[*]of
[*]menu
[*]items
[*]that
[*]don't
[*]fit
[*]on
[*]a
[*]single
[*]mobile
[*]screen
[*]and
[*]that
[*]need
[*]to
[*]be
[*]scrolled
[*]down
[/list]



Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus. Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.

Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus. Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.

Et fuga est eos libero recusandae minus quas dolores. Reprehenderit molestiae expedita quia in et minus adipisci unde. Animi architecto nam quia nesciunt minus dolorem quae. Consequatur adipisci ullam qui. Quam quibusdam fugiat qui aut. Tenetur sunt quo et harum possimus laudantium atque voluptatem. Illum quia est suscipit id. Necessitatibus praesentium autem quisquam deserunt vel omnis doloribus.  Autem aliquid porro qui. Qui quo aliquam illum quo quis rerum. Dolores quos tempore est quia quia rerum voluptatibus maiores. Et voluptatem libero quas sunt nisi quasi cupiditate sint. Veniam animi ab ut dolorem. Eos saepe rerum eaque. Veniam omnis eius quis. Molestiae ut aspernatur et consectetur ducimus. Enim asperiores vero ex. Vel laborum facilis blanditiis tempora qui quia. Et aliquid aut necessitatibus praesentium laborum quia delectus architecto. Voluptatibus reprehenderit beatae perspiciatis odit ea quam molestias tempora.



Es funktioniert gut auf dem Desktop. Mein Problem liegt bei Telefonen: Das Menü ist zu groß, um vollständig auf dem Bildschirm angezeigt zu werden, aber ich kann nicht nach unten scrollen, um auf den Rest zuzugreifen. Ich gehe davon aus, dass dies ein Nebeneffekt der Sticky-Eigenschaft ist.
Ich habe versucht, position:fixed anstelle von position:sticky zu verwenden, aber das Problem bleibt das gleiche. Ich habe mir auch andere Websites mit dem gleichen Menülayout angesehen, das ich möchte, aber ich verstehe nicht, wie sie das gemacht haben.
Wie kann ich das Menü scrollbar machen und gleichzeitig den Sticky-Header beibehalten? ohne die Position meines Scrollens zu verlieren, wenn ich auf das Menü zugreife? Muss ich JS verwenden, um die aktuelle Position der vertikalen Achse zu speichern und nach dem Schließen des Menüs dorthin zurückzukehren?

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post