Menü: Wenn Sticky, dann Logo (im Mennü) einblenden

Grille

Grille

Erfahrenes Mitglied
Hallo,

ich habe unterhalb eines Sliders eine Menü, welche auf "sticky" gesetzt ist. Wenn ich nun nach oben scrolle und das Menü oben ist, soll ein weiterer Menü-Button, mit einem Logo, sichtbar werden.

Gerne möchte ich dieses in Jquery umsetzen.

Mein Problem bis jetzt:

ich möchte nur wenn gescrollt wird, eine Positionsabfrage des Menüs erfolgt.
$(window).scroll(function(event){ prüfe ob Menu sticky ist });

Ist "Menü sticky" , dann mache Element sichtbar ... wenn nicht mehr "sticky", dann wieder unsichtbar.

Als Tortenstück hätte ich gerne eine animierte Einblendung ... aber das ist erst einmal nicht so wichtig.

Könnt Ihr mir helfen? Kennt Ihr vielleicht ein Tutorial?

Vielen Dank!
 
Guten Morgen,

offensichtlich gibt es schon einen Event, in dem das Menu sticky gesetzt wird. Kannst du dich nicht an diesen hängen und dort dein gewünschtes Element mit ein-/ausblendest.

Ciao
Quaese
 
Quaese hat gesagt.:
Guten Morgen,

offensichtlich gibt es schon einen Event, in dem das Menu sticky gesetzt wird. Kannst du dich nicht an diesen hängen und dort dein gewünschtes Element mit ein-/ausblendest.

Ciao
Quaese
Zum Vergrößern anklicken....
Hallo ...

ich benutze über Bootstrap 5 die Funktion "sticky-top". Ich denke das ist doch die reine CSS-Einstellung. Habe ich dort auch ein Event, welches ich nutzen kann?
 
Ich habe schon gesehen, dass die Eigenschaft "sticky" dynamisch gesetzt wird aber normaler Weise ist das nicht nötig. Wie Bootstrap 5 das macht, keine Ahnung.
Aber man kann problemlos prüfen ob ein Element sticky ist, indem man das umgebende Rechteck mit getBoundingClientRect ermittelt und prüft ob "top" gleich 0 ist. Das Ganze in einem Eventlistener für "scroll" und man kann den Button zeigen oder verbergen.
 
Ich müsste auch erst analysieren, wie Bootstrap intern das sticky Verhalten regelt. Vielleicht besteht die Möglichkeit, sich an eine CSS-Klasse (-Animation) oder ähnlichen zu hängen.

Ansonsten hat dir @Sempervivum eine Möglichkeit vorgeschlagen. Eine weitere wäre der Intersection Observer. Damit kannst du ebenfalls überwachen, ob sich Elemente im View-Bereich befinden und entsprechend das Dokument manipulieren. Vorteil ist die deutlich bessere Performanz, da es nicht in Timeouts überwacht werden muss.

Ciao
Quaese
 
Soweit ich weiß wird da in bootstrap5 gar nichts dynamisch gesetzt, bei der sticky Klasse. Das ganz normales css mit Position sticky. Also die observer Lösung scheint schon die richtige zu sein. Und falls dynamisch eine Klasse hinzugefügt wird kannst du das ja auch per observer überwachen.
 
Mit ist nicht ersichtlich, wie einem der Intersection-Observer bei dieser Aufgabe nützlich sein könnte: Ein Element, das sticky positioniert ist, befindet sich immer im Anzeigebereich (wenn man mal top<0 ausschließt). Ich habe das rasch getestet:
Code: 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Language" content="de">
    <title>Button einblenden wenn Menü sticky ist</title>
    <meta charset="UTF-8">
    <style>
        nav {
            position: sticky;
            top: 0;
            background-color: aqua;
            height: 3em;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        nav button {
            margin-right: 0.5em;
            opacity: 0;
            white-space: nowrap;
            box-sizing: border-box;
            transition: opacity 0.5s, width 1s 0.5s;
        }

        /* Die Opacity können wir problemlos animieren */
        nav.is-sticky button {
            opacity: 1;
            transition: opacity 1s 0.5s, width 0.5s;
        }

        main {
            height: 200vh;
        }
    </style>
</head>

<body>
    <div class="above-menu">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et
        accusam et justo duo dolores et ea rebum.
    </div>
    <nav><button>Der Button</button>Navigation bzw. Menü</nav>
    <main>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore
        magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
        sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
        dolor sit
        amet.
    </main>
    <script>
        const item = document.querySelector("nav");
        var io = new IntersectionObserver(function (entries) {
            console.log(entries);
        }, {});
        io.observe(item);
    </script>
</body>

</html>
Da feuert nichts beim Scrollen.

Mit einem scroll-Event und wenigen Zeilen Javascript ist es jedoch getan, ohne Timer:
Code: 
        // Weil sich die Breite mit CSS nicht nach "auto" animieren lässt,
        // setzen wir sie lieber mit Javascript.
        const
            nav = document.querySelector('nav'),
            btn = nav.querySelector('button'),
            boxBtn = btn.getBoundingClientRect();
        // Breite des Button incl. padding und border
        wBtn = boxBtn.width;
        btn.style.width = 0;
        window.addEventListener('scroll', event => {
            const
                boxNav = nav.getBoundingClientRect();
            // Klebt die Navigation jetzt am oberen Rand?
            if (boxNav.top == 0) {
                // Klasse "is-sticky" hinzu fügen, damit können wir
                //  CSS-Eigenschaften animieren
                nav.classList.add('is-sticky');
                // Breite des Button setzen
                btn.style.width = wBtn + 'px';
            } else {
                // Button wieder verbergen
                nav.classList.remove('is-sticky');
                btn.style.width = 0;
            }
        });
(HTML und CSS wie oben)
Ich war so frei, noch ein wenig Animation hinzu zu fügen, weil der Fragesteller es sich wünscht.
 
Vieln Dank für eure Hilfe und besonders an Sempervivum! Deine Scriptvorlage ist sehr hilfreich und ich werde versuchen damit mein Problem zu lösen. Danke
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück