CODEWITHSUNDEEP
javascript
ace
ace

Reputation: 283

Animate easing for scrollTop

How to animate easing for scrollTop? I'm using scrollTop to move div element when site is scrolled. I want div element to move smoothly not jumping so sharply.

Here is the code:

jQuery(window).scroll(function() {
    if (jQuery(window).scrollTop() > 20 ) {
                    jQuery('.topBar').css({
                    'position':'fixed',
                    'top':-40,
                    'bottom':""
                });
   }
    else {
                    jQuery('.topBar').css({
                    'position':'fixed',
                    'top':0,
                    'bottom':""
                });
    }
});

Upvotes: 0

Views: 488

Answers (1)

shershen
shershen

Reputation: 10003

did you try animating the topBar tag then?

jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 20) {
        jQuery('.topBar').animate({
            top: "40"
        }, 300, function () {
            jQuery(this).addClass('scrolled');
        });
    } else {
        jQuery('.topBar').animate({
            top: "0"
        }, 300, function () {
            jQuery(this).removeClass('scrolled');
        });
    }
});

I've created following fiddle to illustrate what i mean: http://jsfiddle.net/2d3mxm5a/

Upvotes: 1

Related Questions