scroll2078

navigation bar behavior based on scroll bar

2024-04-01 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greatest.deepsurf.us/scripts/491240/1352605/scroll2078.js

سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.

Wrap lines

document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.header');
    let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;

    header.style.transform = 'translateY(-20px)';

    function handleScroll() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        let delta = scrollTop - lastScrollTop;

        if (scrollTop >= 0 && scrollTop <= 20) {
            let translateYValue = -20 + scrollTop;
            header.style.transform = `translateY(${translateYValue}px)`;
        } else if (scrollTop > 20) {
            // Ensure the header is fully visible if the scroll is beyond 20px
            header.style.transform = 'translateY(0px)';
        }

        lastScrollTop = scrollTop;
    }

    window.addEventListener('scroll', handleScroll);
});