$(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');
}
});
});JQuery Sticky
Written by