jQuery Sticky Header Logic

February 6, 2025 · AI Conversations

User

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;
}
});
});
Also when absolute bottom hide sticky-header

Assistant

You can modify your script to hide the `.sticky-header` when the user reaches the bottom of the page. Here's an 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
            const scrollHeight = $(document).height();
            const scrollPosition = $(window).height() + currentScroll;

            if (scrollPosition >= scrollHeight) {
                // Hide sticky header when reaching the absolute bottom
                header2.style.opacity = "0";
                header2.style.display = "none";
            } else {
                if (currentScroll > lastScrollTop) {
                    // Scrolling down
                    header1.style.display = "none";
                    header2.style.display = "flex";
                    header2.style.opacity = "1";
                } else {
                    // Scrolling up
                    if (currentScroll === 0) {
                        header1.style.display = "block";
                        header2.style.opacity = "0";
                        header2.style.display = "none";
                    }
                }
            }

            lastScrollTop = currentScroll;
        }
    });
});

### Changes and Fixes:
1. **Detects bottom of the page**
– When `scrollPosition` (current scroll + viewport height) is equal to `scrollHeight` (total page height), it hides `.sticky-header`.

2. **Prevents flickering issues**
– Ensures the sticky header only hides when scrolling reaches the bottom.

This ensures the `.sticky-header` remains visible during scrolling but disappears when the user reaches the absolute bottom of the page. 🚀

jQuery Sticky Header Logic

Leave a Comment Cancel