Show Hidden Header on Scroll

January 23, 2025 · AI Conversations

User

We have two sticky headers one is hide
In elementor
Now when scroll to browser I want to show hidden header

Assistant

To implement a sticky header in Elementor that appears when you scroll, you can use a combination of Elementor settings and custom CSS/JavaScript. Here's how to achieve it:

### Steps to Show Hidden Header on Scroll in Elementor

1. **Create the Sticky Headers in Elementor:**
– In your Elementor editor, create two headers:
– **Header 1 (Default):** Visible by default.
– **Header 2 (Hidden):** Initially hidden (you can achieve this by setting `display: none` in the Advanced tab under Custom CSS for the second header).

2. **Set Sticky Behavior:**
– For **Header 2**, go to the Advanced tab → Motion Effects.
– Enable **Sticky** and set it to **Top**.
– Choose on which devices (Desktop, Tablet, Mobile) this should apply.

3. **Add Custom CSS to Hide Header 2 Initially:**
In the Elementor custom CSS panel for Header 2, add the following:

display: none;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;

4. **Add Custom JavaScript for Scroll Behavior:**
Add the following script to your Elementor header or a custom code snippet plugin:

document.addEventListener("DOMContentLoaded", function () {
       const header1 = document.querySelector(".header-1"); // Replace with Header 1 class or ID
       const header2 = document.querySelector(".header-2"); // Replace with Header 2 class or ID
       
       let lastScroll = 0;

       window.addEventListener("scroll", function () {
           const currentScroll = window.pageYOffset;

           if (currentScroll > lastScroll && currentScroll > 200) {
               // Hide Header 1 and Show Header 2 on scroll down
               header1.style.display = "none";
               header2.style.display = "block";
               header2.style.opacity = "1";
           } else if (currentScroll < lastScroll) {
               // Show Header 1 and Hide Header 2 on scroll up
               header1.style.display = "block";
               header2.style.opacity = "0";
               setTimeout(() => {
                   header2.style.display = "none";
               }, 300); // Match the CSS transition duration
           }

           lastScroll = currentScroll;
       });
   });

5. **Adjust the Scroll Threshold:**
In the script above, the `currentScroll > 200` determines when the second header becomes visible. Adjust this value to match your design.

6. **Publish and Test:**
Save the changes and test your website on different devices to ensure the headers appear and hide smoothly as intended.

Let me know if you need further clarification or adjustments!

User

Both are sticky

Assistant

If both headers are sticky and you want to toggle between them based on the scroll direction, the solution changes slightly. Here's how you can achieve this effect:

### Requirements
1. **Header 1:** Sticky and visible by default at the top of the page.
2. **Header 2:** Sticky but hidden initially and appears when scrolling down past a certain point.

### Steps to Implement

#### 1. **Set Both Headers as Sticky in Elementor**
– Go to Elementor → Edit Header 1:
– Advanced → Motion Effects → Enable **Sticky** → Set to **Top**.
– Repeat the same for Header 2.

#### 2. **Add Custom CSS**
To control the visibility and smooth transitions, add the following CSS to **both headers** via the Elementor Custom CSS section:

For **Header 1**:

transition: transform 0.3s ease-in-out;
z-index: 10; /* Ensure Header 1 is above Header 2 */

For **Header 2**:

transform: translateY(-100%); /* Hidden off-screen initially */
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 9; /* Ensure Header 2 is below Header 1 */

#### 3. **Add JavaScript**
Add the following script using Elementor's custom code section (set it to load in the footer), or use a plugin like Code Snippets:

document.addEventListener("DOMContentLoaded", function () {
    const header1 = document.querySelector(".header-1"); // Replace with the actual class or ID for Header 1
    const header2 = document.querySelector(".header-2"); // Replace with the actual class or ID for Header 2
    let lastScrollTop = 0;

    window.addEventListener("scroll", function () {
        const currentScroll = window.pageYOffset;

        if (currentScroll > lastScrollTop) {
            // Scrolling Down
            header1.style.transform = "translateY(-100%)";
            header2.style.transform = "translateY(0)";
            header2.style.opacity = "1";
        } else {
            // Scrolling Up
            header1.style.transform = "translateY(0)";
            header2.style.transform = "translateY(-100%)";
            header2.style.opacity = "0";
        }

        lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // Prevent negative scroll
    });
});

#### 4. **Adjust z-index if Overlapping**
Make sure **Header 1** has a higher z-index than **Header 2** when visible. Modify the CSS for both headers as needed:

.header-1 {
    z-index: 10;
}
.header-2 {
    z-index: 9;
}

#### 5. **Test and Fine-Tune**
– Replace `.header-1` and `.header-2` with the actual classes/IDs of your headers.
– Adjust the `transform` and scroll behavior thresholds as needed.
– Test on mobile, tablet, and desktop for consistency.

Let me know if you encounter any issues or need further adjustments!

Show Hidden Header on Scroll

Leave a Comment Cancel