Two Menus Scroll Effect

December 27, 2024 ยท AI Conversations

User
we have two menu bar one for normal window and other for show when window scroll to bottom and then if up again show default menubar jquery html
Assistant
To create a setup where you have two menu bars, one for a normal window and the other to show when the user scrolls to the bottom (and reverts back to the default menu bar on scrolling up), you can achieve this with jQuery and HTML.

Here's a step-by-step implementation:

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Menus with Scroll</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .menu-bar {
            position: fixed;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
            z-index: 1000;
        }
        .menu-bar.hidden {
            display: none;
        }
        .menu-bar.default {
            top: 0;
        }
        .menu-bar.bottom {
            bottom: 0;
        }
        .content {
            height: 2000px; /* For testing scrolling */
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <!-- Default Menu Bar -->
    <div class="menu-bar default">
        Default Menu Bar
    </div>

    <!-- Bottom Menu Bar -->
    <div class="menu-bar bottom hidden">
        Bottom Menu Bar
    </div>

    <div class="content">
        <p>Scroll to see the effect.</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let lastScrollTop = 0;

            $(window).scroll(function() {
                const currentScroll = $(this).scrollTop();
                const windowHeight = $(this).height();
                const documentHeight = $(document).height();

                if (currentScroll + windowHeight >= documentHeight) {
                    // At the bottom of the page
                    $('.menu-bar.default').addClass('hidden');
                    $('.menu-bar.bottom').removeClass('hidden');
                } else if (currentScroll < lastScrollTop) {
                    // Scrolling up
                    $('.menu-bar.default').removeClass('hidden');
                    $('.menu-bar.bottom').addClass('hidden');
                }

                lastScrollTop = currentScroll;
            });
        });
    </script>
</body>
</html>

### Explanation
1. **HTML Structure**:
– A `menu-bar.default` is positioned at the top of the window.
– A `menu-bar.bottom` is positioned at the bottom but initially hidden.

2. **CSS**:
– Both menu bars are styled to be `position: fixed` for visibility.
– `.hidden` class toggles visibility using `display: none`.

3. **jQuery Logic**:
– On scroll, the script checks if the user is at the bottom of the page by comparing the scroll position with the document's height.
– If the user scrolls to the bottom, the bottom menu bar is displayed, and the default menu bar is hidden.
– If the user scrolls up, the default menu bar reappears, and the bottom menu bar hides.

This approach provides a smooth transition between menu bars depending on scroll behavior.

User
when scroll down
Assistant
If you want to display a specific menu bar when the user scrolls **down** and switch back to the default menu when scrolling **up**, you can achieve this by detecting the scroll direction in your jQuery script.

Here's the updated implementation:

### HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Down Menu</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .menu-bar {
            position: fixed;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
            z-index: 1000;
        }
        .menu-bar.hidden {
            display: none;
        }
        .menu-bar.default {
            top: 0;
        }
        .menu-bar.scroll-down {
            top: 0;
        }
        .content {
            height: 2000px; /* For testing scrolling */
            padding-top: 50px;
        }
    </style>
</head>
<body>
    <!-- Default Menu Bar -->
    <div class="menu-bar default">
        Default Menu Bar
    </div>

    <!-- Scroll Down Menu Bar -->
    <div class="menu-bar scroll-down hidden">
        Scroll Down Menu Bar
    </div>

    <div class="content">
        <p>Scroll to see the effect.</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            let lastScrollTop = 0;

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

                if (currentScroll > lastScrollTop) {
                    // Scrolling down
                    $('.menu-bar.default').addClass('hidden');
                    $('.menu-bar.scroll-down').removeClass('hidden');
                } else {
                    // Scrolling up
                    $('.menu-bar.default').removeClass('hidden');
                    $('.menu-bar.scroll-down').addClass('hidden');
                }

                lastScrollTop = currentScroll;
            });
        });
    </script>
</body>
</html>

### How It Works
1. **Default Menu Bar**:
– Shown when the user scrolls up.

2. **Scroll Down Menu Bar**:
– Shown when the user scrolls down.

3. **jQuery Logic**:
– Tracks the scroll position using `$(window).scroll()`.
– Compares the current scroll position (`currentScroll`) with the last scroll position (`lastScrollTop`).
– If `currentScroll > lastScrollTop`, it means the user is scrolling **down**, so the "Scroll Down Menu Bar" is shown and the default menu is hidden.
– If `currentScroll < lastScrollTop`, it means the user is scrolling **up**, so the default menu is shown and the "Scroll Down Menu Bar" is hidden.

4. **CSS**:
– `.hidden` toggles visibility by applying `display: none`.
– Both menus are positioned at the top (`top: 0`) for smooth visibility transitions.

This approach dynamically switches between the two menu bars based on the scroll direction.

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

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

if (currentScroll > lastScrollTop) {
// Scrolling down
$('.menu-bar.default').addClass('hidden');
$('.menu-bar.scroll-down').removeClass('hidden');
} else {
// Scrolling up
$('.menu-bar.default').removeClass('hidden');
$('.menu-bar.scroll-down').addClass('hidden');
}

lastScrollTop = currentScroll;
});
});
add above in wp_footer hook wordpress

Assistant
To include the provided jQuery code in the `wp_footer` hook in WordPress, follow these steps:

### 1. Add the Code in `functions.php`
Edit your theme's `functions.php` file and enqueue a script that contains the jQuery code. Here's how you can do it:

function custom_scroll_script() {
    ?>
    <script>
        jQuery(document).ready(function ($) {
            let lastScrollTop = 0;

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

                if (currentScroll > lastScrollTop) {
                    // Scrolling down
                    $('.menu-bar.default').addClass('hidden');
                    $('.menu-bar.scroll-down').removeClass('hidden');
                } else {
                    // Scrolling up
                    $('.menu-bar.default').removeClass('hidden');
                    $('.menu-bar.scroll-down').addClass('hidden');
                }

                lastScrollTop = currentScroll;
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_scroll_script');

### 2. Add the Menu Bars to Your Theme
Make sure you have the necessary menu bars in your theme's `header.php` or the appropriate template file:

<div class="menu-bar default">
    Default Menu Bar
</div>

<div class="menu-bar scroll-down hidden">
    Scroll Down Menu Bar
</div>

### 3. Add the Necessary CSS
Add the CSS to your theme's `style.css` file or via the WordPress Customizer:

.menu-bar {
    position: fixed;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
    z-index: 1000;
}

.menu-bar.hidden {
    display: none;
}

.menu-bar.default {
    top: 0;
}

.menu-bar.scroll-down {
    top: 0;
}

### 4. Verify jQuery is Loaded
WordPress includes jQuery by default, but ensure it's loaded in your theme by adding the following to `functions.php`:

function ensure_jquery_loaded() {
    if (!wp_script_is('jquery', 'enqueued')) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'ensure_jquery_loaded');

### Result
This setup will inject the jQuery script into the `wp_footer` section of your WordPress site. It will dynamically toggle the visibility of the two menu bars based on the scroll direction.

Leave a Comment

Your email address will not be published. Required fields are marked *