Scrolled (up, Down)

publ 14.03.2026

Header und Go-Up ein/ausblenden beim scrollen

Prompt:

Wenn 300 pixel gescrollt wurde, soll an <body> die Class 'scrolled' angehängt werden.

-- wenn nach unten gescrollt wurde (egal wie weit) soll zusätzlich 'scrolled-down' angehängt werden.

-- wenn nach oben gescrollt wurde (egal wie weit) soll 'scrolled-up' angehängt werden.

-- bei scrolled-down / scrolled-up soll die jeweils andere gelöscht werden.

let lastScrollTop = 0;

let waiting = false;

const $body = $('body');



$(window).on('scroll', function() {

    if (waiting) return; // Wenn gesperrt: Nichts tun



    waiting = true; // Sperre setzen

    

    setTimeout(function() {

        let scrollTop = $(window).scrollTop();



        // 1. Check: Über oder unter 300px?

        $body.toggleClass('scrolled', scrollTop > 300);



        // 2. Check: Scroll-Richtung bestimmen

        if (scrollTop > lastScrollTop) {

            $body.addClass('scrolled-down').removeClass('scrolled-up');

        } else if (scrollTop < lastScrollTop) {

            $body.addClass('scrolled-up').removeClass('scrolled-down');

        }



        lastScrollTop = Math.max(0, scrollTop);

        

        waiting = false; // Sperre nach 100ms wieder aufheben

    }, 100); 

});





Beispiel-css:

style

body.scrolled-down .header { transform: translateY(-100%); transition: 0.3s; }

body.scrolled-up .header { transform: translateY(0); transition: 0.3s; }

/style

Neuere Themen:

Notizen: Topics
Was aktuell so auffällt Go_up
Bug: ColorChooser

Ältere Themen:

Fensterbreite feststellen

Back