Comment faire coller un élément en bas de page lors d'un défilement vers le haut ?

Question

Ce que j'essaie d'accomplir ressemble à ceci : https://imgur.com/a/YFcfO3N

En gros, je veux un menu en bas de page qui colle au bas de la page lorsque vous faites défiler vers le haut.

Answer 1

Je viens de vérifier la console du développeur https://imgur.com/a/YFcfO3N Il semble qu'ils utilisent un conteneur de pied de page avec la classe "Footer-wrapper", avec les propriétés CSS suivantes :

.Footer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

Lors du défilement vers le bas, une autre classe est ajoutée au conteneur, "down":

.down {
    bottom: -60px;
}

La position négative doit correspondre à la hauteur du pied de page/menu.

Je pense qu'ils font cela en utilisant JavaScript. Vous pouvez vérifier si l'utilisateur est en haut de la page en JavaScript comme ceci :

let userIsAtTheTopOfThePage = window.pageYOffset === 0;

Des cours peuvent être ajoutés à des éléments comme celui-ci :

element.classList.add("my-class");

et supprimez comme ceci :

element.classList.remove("my-class");

EDIT : Désolé, j'ai d'abord mal compris la question, mais ce que vous voulez réaliser peut être réalisé de la même manière. Jetons un coup d'œil à cet exemple de menu :

<nav id="menu">
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
        <li>Menu item 3</li>
        <!-- Add more menu items here -->
    </ul>
</nav>

Utilisez ce CSS

#menu {
    position: fixed;
    bottom: 0;
    left: 0;
}
.scrolling-menu {
    position: static !important;
}

et ce JavaScript

document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("scroll", function() {
        var menu = document.getElementById("menu");
        var scrollPosition = window.scrollY;
        var windowHeight = window.innerHeight;
        var documentHeight = document.body.offsetHeight;
        var scrollThreshold = documentHeight - windowHeight - 200; // Adjust this value to determine when the menu should become part of the flow

        if (scrollPosition > scrollThreshold) {
            menu.classList.add("scrolling-menu");
        } else {
            menu.classList.remove("scrolling-menu");
        }
    });
});

Cela devrait être possible.