Comment avez-vous un élément flottant/fixe sur une page Web selon quelle partie de la page est visible?

Question

La question est confuse, je sais, mais je ne pouvais pas le dire autrement.

est ici l'url: Configure - Apple Store (U.S.)

La case « Résumé » du côté est aligné en dessous du sous-en-tête (avec des photos de tous les modèles de Mac) et est à la même hauteur que le bloc de contenu. Si vous faites défiler la page vers le haut, la page entière monte comme prévu. Cependant, au moment où le bloc de contenu défile de la zone visible de la fenêtre du navigateur, le bloc de résumé s'ancre au niveau supérieur et reste là même si vous faites défiler jusqu'à la fin de la page.

Comment s'appelle ce comportement et quelle est la manière la plus simple et la plus propre d'y parvenir? Je préférerais un plugin jQuery et/ou un extrait de code au lieu du simple JavaScript.

Answer 1

Vous pouvez faire quelque chose comme ceci:

$(function() { 
    var $el = $('.fixedElement'), 
     originalTop = $el.offset().top; // store original top position 

    $(window).scroll(function(e){ 
    if ($(this).scrollTop() > originalTop){ 
     $el.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
     $el.css({'position': 'absolute', 'top': originalTop}); 
    } 
    }); 
}); 

Vérifiez un exemple here.

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.