web-dev-qa-db-fra.com

Comment faire un <div> déplacer de haut en bas lorsque je fais défiler la page?

Comment faire en sorte qu'un élément div monte et descende lorsque l'utilisateur fait défiler la page? (où cet élément est toujours visible)

javascriptjquerycsshtml
53
The Unknown

Vous souhaitez appliquer la propriété fixed 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é fixed. En savoir plus sur qui le soutient, qui ne le fait pas et certains travaillent ici

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

73
Bob

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 fork: http://codepen.io/think123/pen/ mAxlb

Update: et une solution jQuery non animée:

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

en utilisant position:fixed seul est acceptable si vous n'avez pas d'en-tête ou de logo en haut de votre page. Cette solution prend en compte le degré de défilement de la fenêtre et déplace la division lorsque vous avez fait défiler votre en-tête. Il sera ensuite verrouillé à nouveau lorsque vous atteindrez le sommet.

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");
}
11
lmno

Voici le code JQuery

$(document).ready(function () {
     var el = $('#Container');
        var originalelpos = el.offset().top; // take it where it originally is on the page

        //run on scroll
        $(window).scroll(function () {
            var el = $('#Container'); // important! (local)
            var elpos = el.offset().top; // take current situation
            var windowpos = $(window).scrollTop();
            var finaldestination = windowpos + originalelpos;
            el.stop().animate({ 'top': finaldestination }, 1000);
        });
    });
5
Alireza Masali

Ajoutez simplement position: fixed; dans ton style div.

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

4
chandrgupt

Vous voudrez peut-être consulter l'article récent de Remy Sharp sur les éléments flottants fixes sur jQuery for Designers , qui contient une vidéo de Nice et décrit comment appliquer cet effet. dans le script client

3
Russ Cam