Scroll event on resize

January 23, 2025 · AI Conversations

User

jQuery(document).ready(function ($) {
let lastScrollTop = 0;

$(window).scroll(function () {
const currentScroll = $(this).scrollTop();
const header1 = document.querySelector(".main-header"); // Replace with Header 1 class or ID
const header2 = document.querySelector(".sticky-header"); // Replace with Header 2 class or ID
if (currentScroll > lastScrollTop) {
// alert($(this).scrollTop());
header1.style.display = "none";
header2.style.display = "flex";
header2.style.opacity = "1";
} else {
if (currentScroll === 0) {
header1.style.display = "block";
header2.style.opacity = "0";
header2.style.display = "none";
}
}

lastScrollTop = currentScroll;
});
})
run above when screen width more than 767

Assistant

You can modify the script to ensure it runs only when the screen width is greater than 767px by wrapping your code in a `if` statement that checks the screen width. Here's the updated version of your script:

jQuery(document).ready(function ($) {
    let lastScrollTop = 0;

    $(window).scroll(function () {
        if ($(window).width() > 767) {  // Check if screen width is greater than 767px
            const currentScroll = $(this).scrollTop();
            const header1 = document.querySelector(".main-header"); // Replace with Header 1 class or ID
            const header2 = document.querySelector(".sticky-header"); // Replace with Header 2 class or ID

            if (currentScroll > lastScrollTop) {
                // alert($(this).scrollTop());
                header1.style.display = "none";
                header2.style.display = "flex";
                header2.style.opacity = "1"; 
            } else {
                if (currentScroll === 0) {
                    header1.style.display = "block";
                    header2.style.opacity = "0";
                    header2.style.display = "none";
                }
            }

            lastScrollTop = currentScroll;
        }
    });
});

This ensures that the scroll event logic will only execute if the screen width is more than 767px.

Scroll event on resize

Leave a Comment Cancel