In fact, if you find yourself wanting to do a lot of stuff when scrolling
has stopped, you could add an event for it (again, untested):
(function($) {
var scrollTimeoutID;
$(window).bind('scroll', function() {
clearTimeout(scrollTimeoutID);
scrollTimeoutID = setTimeout(function() {
$(window).trigger('scrollstop');
}, 300);
});
})(jQuery);
$(document).ready(function() {
var topOffset = 100;
$("#label").css('top', topOffset + "px");
$(window).bind('scrollstop', function() {
$("#label").animate({top: $(document).scrollTop() + topOffset},
"slow", "easein");
});
});
Hope it helps.
--Erik
On 9/1/07, Erik Beeson <[EMAIL PROTECTED]> wrote:
> Approaching the problem a different way, how about only firing the
> animation if scrolling has paused for a moment? Maybe something like
> (untested):
>
> $(document).ready(function() {
> var scrollTimeoutID;
> var topOffset = 100;
> $("#label").css('top', topOffset + "px");
>
> $(window).bind('scroll', function() {
> clearTimeout(scrollTimeoutID);
>
> scrollTimeoutID = setTimeout(function() {
> $("#label").animate({top: $(document).scrollTop() + topOffset},
> "slow", "easein");
> }, 300);
> });
> });
>
> You should probably play around with that 300 to find the optimum
> setting for you.
>
> Hope it helps.
>
> --Erik
>
>
> On 9/1/07, emi polak <[EMAIL PROTECTED]> wrote:
> > no luck heh? :(
> >
> >
> > On 9/1/07, emi polak <[EMAIL PROTECTED]> wrote:
> > > Hi,
> > > I am altering the "top" property of a floating label in a webpage. The
> > "top" adjustement is fired at page scroll, so that the label would
always
> > stay in its place.
> > > Now I would like to animate the label between its oldPosition and
> > newPosition. So I use animate() to set the "top" property, but the
method
> > starts many times during the page scroll, thus creating a very buggy and
> > slow motion.
> > >
> > > So: is there a way to cancel an already started animation, so that
when
> > "scroll", the animation is first canceled and then its fired again?
> > >
> > > Here is what I'm using now:
> > >
> > > var topOffset = 100;
> > > $("#label").css('top', topOffset + "px");
> > >
> > > $(window).bind("scroll", function() {
> > > var newScrollTop = $(document).scrollTop();
> > > var newPos = newScrollTop + topOffset;
> > >
> > > $("#label").animate({
> > > top: newPos
> > > }, "slow", "easein");
> > > });
> > >
> > > Thank you!
> > > emipolak
> > >
> > >
> >
> >
>
