I'm creating a blog layout, which has an sidebar. In sidebar there are sections/boxes, but the last one of these boxes should follow scrolling when none of the other boxes are visible .
So, when user scrolls down, he sees a normal sidebar, but when user has went down enough, sidebar ends but the last box starts to follow on the top of the screen. I have seen this a lot on different kind of sites.
So hard to explain with my english. I already made it to follow screen smoothly with animate() but couldn't get it like this. Hope you understood.
I already tried in Google for almost an hour but couldn't figure out any keywords (due to my bad english).
EDIT: My code at the 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);
});
});
Source: Tips4all
There's a fantastic jQuery tutorial for this at http://jqueryfordesigners.com/fixed-floating-elements/.
ReplyDeleteIt replicates the Apple.com shopping cart type of sidebar scrolling. The Google query that might have served you well is "fixed floating sidebar".
I figured it out:
ReplyDeletevar 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);
}
});
The solution can be boiled down to this, in my humble opinion:
ReplyDeletevar 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);}
});
I have changed the assignment of el because, again in my humble opinion, finding a single element by class is not a great habit to get in to. If you only want one element find it by id. If you want to iterate over a collection of elements then find them by class.
I am using this to keep my code small but, hopefully, readable!
That code doesn't work very well
ReplyDeletei fixed it a little bit
var el = $('.caja-pago');
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().animate({'top':400},500);
} else {
el.stop().animate({'top':windowpos+10},500);
}
});
Detailed explanation in the link below:
ReplyDeleteFixed Floating Sidebar
It uses a technique which avoids the class switching and "if" statements and produces a very smooth effect.
I needed the div to stop when it reach a certain object, so i did it like this:
ReplyDeletevar el = $('#followdeal');
var elpos_original = el.offset().top;
$(window).scroll(function(){
var elpos = el.offset().top;
var windowpos = $(window).scrollTop();
var finaldestination = windowpos;
var stophere = ( $('#filtering').offset().top ) - 170;
if(windowpos<elpos_original || windowpos>=stophere) {
finaldestination = elpos_original;
el.stop().animate({'top':10});
} else {
el.stop().animate({'top':finaldestination-elpos_original+10},500);
}
});