JQuery Sticky

Written by

          $(document).ready(function() {
            // Sélectionne l'élément avec la classe "sticky-element" 
            var stickyElement = $('.sticky-element');
            // Récupère la distance entre l'élément sélectionné et le haut de la page
            var stickyTop = stickyElement.parent().offset().top;
            console.log('espace par rapport au haut de la page : '+stickyTop);
            console.log('height :' +stickyElement.outerHeight());
            console.log('parent: ' +stickyElement.parent().attr('class')+ 'height :'+stickyElement.parent().height());
        
            // Calcule la distance entre le bas de l'élément sélectionné et le bas de son parent, en soustrayant 100 pixels 
            var stickyBottom = stickyElement.parent().height() - stickyTop - stickyElement.outerHeight() - 100;
            // Ajoute un événement de défilement à l'objet "window"
            $(window).scroll(function() {
              var scrollTop = $(this).scrollTop();
                // Si la position de défilement est comprise entre la distance au haut de la page de l'élément sélectionné 
                // et la distance au bas de la page de l'élément sélectionné, 
                // ajoute la classe "sticky" à l'élément
                if (scrollTop > stickyTop ) {
                  stickyElement.addClass('sticky');
                }
                // Si la position de défilement est supérieure à la distance au bas de la page de l'élément sélectionné, ajoute la classe "stickybottom" et retire la classe "sticky" de l'élément
                // else if (scrollTop > stickyBottom) {
                //   stickyElement.addClass('stickybottom');
                //   stickyElement.removeClass('sticky');
                // }
    
                // Si la position de défilement est inférieure à la distance au haut de la page de l'élément sélectionné, retire les classes "sticky" et "stickybottom" de l'élément
                else {
                  stickyElement.removeClass('sticky');
                  stickyElement.removeClass('stickybottom');
                }
            });
          });