Comment faire en sorte que div scroll défile en douceur avec jQuery?

Question

Je suis la création d'un blog mise en page, qui dispose d'une barre latérale. Dans la barre latérale, il y a des sections/boîtes, mais le dernier de ces boîtes doivent suivre le défilement lorsque aucun des autres cases sont visibles.

Alors, lorsque l'utilisateur fait défiler vers le bas, il voit un normal de la barre latérale, mais lorsque l'utilisateur a descendait assez, la barre latérale se termine, mais la dernière case commence à suivre sur le haut de l'écran. J'ai vu beaucoup sur les différents type de sites.

EDIT: Mon code pour le moment:

$(window).scroll(function(){
    $.each($('.follow-scroll'),function(){
        var eloffset = $(this).offset();
        var windowpos = $(window).scrollTop();
        if(windowpos<eloffset.top) {
            var finaldestination = 0;
        } else {
            var finaldestination = windowpos;
        }
        $(this).stop().animate({'top':finaldestination},200);
    });
});

Answer 1

Je l'ai compris:

 var el = $('.follow-scroll');
var elpos_original = el.offset().top;
$(window).scroll(function(){
    var elpos = el.offset().top;
    var windowpos = $(window).scrollTop();
    var finaldestination = windowpos;
    if(windowpos<elpos_original) {
        finaldestination = elpos_original;
        el.stop().css({'top':10});
    } else {
        el.stop().animate({'top':finaldestination-elpos_original+10},500);
    }
});
 

Answer 2

Il existe un fantastique didacticiel jQuery sur http://jqueryfordesigners.com/fixed-floating-elements/ .

Il reproduit le type de défilement de la barre latérale de type panier d’Apple.com. La requête Google qui pourrait vous avoir bien servi est "barre latérale flottante fixe".

Answer 3

La solution peut se résumer à ceci, à mon humble avis:

 var el=$('#follow-scroll');
var elpos=el.offset().top;
$(window).scroll(function () {
    var y=$(this).scrollTop();
    if(y<elpos){el.stop().animate({'top':0},500);}
    else{el.stop().animate({'top':y-elpos},500);}
});
 

J'ai changé l'affectation de el parce que, toujours à mon humble avis, trouver un seul élément par classe n'est pas une habitude à prendre. Si vous ne voulez qu'un élément, trouvez-le par id. Si vous souhaitez parcourir une collection d'éléments, recherchez-les par classe.

J'utilise this pour garder mon code petit mais, espérons-le, lisible!

Answer 4

Cela a fonctionné pour moi comme un charme.

JavaScript:

 $(function() { //doc ready
    if (!($.browser == "msie" && $.browser.version < 7)) {
        var target = "#floating", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
        $(window).scroll(function(event) {
            if (top <= $(this).scrollTop()) {
                $(target).addClass("fixed");
            } else {
                $(target).removeClass("fixed");
            }
        });
    }
});
 

CSS:

 #floating.fixed{
    position:fixed;
    top:0;
}
 

Source: http://jqueryfordesigners.com/fixed-floating-elements/

Answer 5

C’est mon code final .... (sur la base des corrections précédentes, merci beaucoup pour headstart, économisez beaucoup de temps pour expérimenter). Ce qui m'embêtait, c'était de défiler vers le haut, ainsi que vers le bas ... :)

ça me fait toujours me demander comment jquery peut être élégant !!!

 $(document).ready(function(){

    //run once
    var el=$('#scrolldiv');
    var originalelpos=el.offset().top; // take it where it originally is on the page

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

});