JS / jQuery 👢 Garder le footer HTML en bas de page

Article Garder le footer de vos pages web html en bas avec JavaScript et jQuery par @wpr0ck
twitter-img / 1024 x 512
Article Garder le footer de vos pages web html en bas avec JavaScript et jQuery par @wpr0ck
twitter-link / 520 x 254
Article Garder le footer de vos pages web html en bas avec JavaScript et jQuery par @wpr0ck
facebook / 1200 x 630

Une fonction en JavaScript et jQuery qui permet de garder le footer (pied de page) en bas du navigateur, même quand le contenu de la page web est court.

Pour se faire, le code ci-dessous compare la distance qui sépare le pied de la page HTML (dans cet exemple, c'est l'élément qui porte l'ID "footer") par rapport à la hauteur de la fenêtre du navigateur web. Si le pied de page et trop haut, la fonction lui applique une marge supérieure (margin-bottom) pour compenser cette différence. Enfin, nous appelons la fonction à deux reprises. Une première fois au chargement de la page. Puis nous l'appelons une seconde fois sur l'événement $(window).resize(); qui se déclenche à chaque fois que le navigateur est redimensionné.

jQuery(document).ready(function($) {

    /**
     * Set footer always on the bottom of the page
     */
    function footerAlwayInBottom(footerSelector) {
        var docHeight = $(window).height();
        var footerTop = footerSelector.position().top + footerSelector.height();

        if (footerTop < docHeight) {
            footerSelector.css("margin-top", (docHeight - footerTop) + "px");
        }
    }

    // Apply when page is loading 
    footerAlwayInBottom($("#footer"));

    // Apply when page is resizing
    $(window).resize(function() {
        footerAlwayInBottom($("#footer"));
    });
});
Julien MA Jacob - Développeur WordPress
Développeur expert WordPress
Julien MA Jacob - Développeur WordPress

Passionné par le web et la programmation. Je propose mes services de développeur pour vos sites WordPress

  Discussion autour de l'article
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires