Comment faire en sorte qu'une <div> se déplace de haut en bas lorsque je fais défiler la page ?

Question

Comment faire en sorte qu'un élément div se déplace vers le haut et le bas de la page lorsque l'utilisateur fait défiler la page ? (où cet élément est toujours visible)

Answer 1

Vous voulez appliquer la propriété fixe au style de position de l'élément.

position:fixed;

Avec quel navigateur travaillez-vous ? Tous les navigateurs ne prennent pas en charge la propriété fixe. Pour en savoir plus sur les navigateurs qui la prennent en charge, ceux qui ne la prennent pas en charge et les solutions possibles, cliquez ici.

http://webreflection.blogspot.com/2009/09/css-position-fixed-solution.html

Answer 2

Juste pour une solution plus animée et plus mignonne :

$(window).scroll(function(){
  $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

Et un stylo pour ceux qui veulent voir : http://codepen.io/think123/full/mAxlb et une fourchette : http://codepen.io/think123/pen/mAxlb

Mise à jour : et une solution jQuery non animée :

$(window).scroll(function(){
  $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
});

Answer 3

En utilisant position:fixed seul convient parfaitement lorsque vous n'avez pas d'en-tête ou de logo en haut de votre page. Cette solution tient compte de la distance parcourue par la fenêtre et déplace la division lorsque vous avez dépassé votre en-tête. Elle le remet ensuite en place lorsque vous revenez en haut de la page.

if($(window).scrollTop() > Height_of_Header){
    //begin to scroll
    $("#div").css("position","fixed");
    $("#div").css("top",0);
}
else{
    //lock it back into place
    $("#div").css("position","relative");
}

Answer 4

Il suffit d'ajouter position: fixed; dans votre style de div.

J'ai vérifié et cela fonctionne bien dans mon code.

Answer 5

Vous pouvez consulter le site de Remy Sharp. article récent sur les éléments flottants fixes chez jQuery for Designers qui contient une belle vidéo et une explication sur la façon d'appliquer cet effet dans le script du client.