Scroll Detection Header Update

January 14, 2025 · AI Conversations

User

let lastScrollTop = 0;

$(window).scroll(function () {
const currentScroll = $(this).scrollTop();

if (currentScroll > lastScrollTop) {
// alert($(this).scrollTop());
// Scrolling down
$('#header-light').css('background',"#225BC0");
$('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo-weiss.svg");

$('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item').addClass("elementor-item-white");
// $('#scroll-header-dark').css('display',"flex");
$(".scroll-button .elementor-button").addClass('elementor-button-secondary-darkbg');
$(".elementor-menu-toggle").addClass('elementor-menu-toggle-scrolldown');
} else {
// Scrolling up
// $('#header-light').css('display',"flex");
$('#header-light').css('background',"#ffffff");
$('.scroll-logo img').attr('src',"/app/uploads/2024/12/SolarOn-Logo.svg");

$('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu–main .elementor-item').removeClass("elementor-item-white");
$(".scroll-button .elementor-button").removeClass('elementor-button-secondary-darkbg');
// $('#scroll-header-dark').css('display',"none");
$(".elementor-menu-toggle").removeClass('elementor-menu-toggle-scrolldown');
}

lastScrollTop = currentScroll;
});

Assistant

Your script is a jQuery-based implementation that changes the header's appearance when the user scrolls up or down the page. It utilizes the `scroll` event to detect the direction of scrolling and applies/removes styles accordingly. Here's a brief explanation and optimization tips:

—

### **Explanation**
1. **Scroll Detection Logic:**
– It keeps track

User

on above again white when we reach top of the page not movement to top

Assistant

To ensure that the header changes back to white only when the user scrolls back to the very top of the page (instead of scrolling upward at any point), you can check if the `currentScroll` position is `0`. Update your code as follows:

let lastScrollTop = 0;

$(window).scroll(function () {
    const currentScroll = $(this).scrollTop();

    if (currentScroll > lastScrollTop) {
        // Scrolling down
        $('#header-light').css('background', "#225BC0");
        $('.scroll-logo img').attr('src', "/app/uploads/2024/12/SolarOn-Logo-weiss.svg");
        $('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item').addClass("elementor-item-white");
        $(".scroll-button .elementor-button").addClass('elementor-button-secondary-darkbg');
        $(".elementor-menu-toggle").addClass('elementor-menu-toggle-scrolldown');
    } else {
        // Scrolling up
        if (currentScroll === 0) {
            // Back to the very top
            $('#header-light').css('background', "#ffffff");
            $('.scroll-logo img').attr('src', "/app/uploads/2024/12/SolarOn-Logo.svg");
            $('.scroll-menu.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item').removeClass("elementor-item-white");
            $(".scroll-button .elementor-button").removeClass('elementor-button-secondary-darkbg');
            $(".elementor-menu-toggle").removeClass('elementor-menu-toggle-scrolldown');
        }
    }

    lastScrollTop = currentScroll;
});

—

### **Changes Made:**
1. **Condition for Scrolling Up:**
– Now, the header only switches back to white when `currentScroll === 0`, i.e., when the user reaches the very top of the page.

2. **Preserving Scroll Down Behavior:**
– Scrolling down behavior remains unchanged, so the header color and other styles change appropriately as the user scrolls down.

—

### **Expected Behavior:**
– The header background remains blue while scrolling down.
– The header background switches to white **only when the page scroll position reaches the top (scroll position `0`)**.

Scroll Detection Header Update

Leave a Comment Cancel