jquery scrolling function not working properly

Question

I'm using this code to change position when scroll. The problem is when scrolled to top of the page css top:'0px' not working. Here is the code.

window.onload = function() {

    var stickySidebar = $('.bk-form-wrap').offset().top;
    var $div = $('div.bk-form-wrap');
    $(window).scroll(function() {

        if ($(window).scrollTop() > stickySidebar) {
            $div.css({
                 position:'fixed',
                 height: '70px'
            });
            $div.animate({
                top: '95px',
                //top:'100%',
               // marginTop: - $div.height() 
            });
        }
        else {  
        }   

        if ($(this).scrollTop() == 0) {
             //Call your event here
             $div.css({
                 position:'relative',
             });
             $div.animate({
                top:'0px',
             });
        }
    });
};

And link to page . Plese help. Thanks.

Answer 1

Try this.

var $div = $('div.bk-form-wrap');  
$(window).scroll(function() {
    var stickySidebar = $('.bk-form-wrap').offset().top;
    if ($(window).scrollTop() > stickySidebar) {
         $div.css({
             position:'fixed',
             height: '70px'
              },1000);
        $div.animate({
            top: '95px'
            //top:'100%',
           // marginTop: - $div.height() 
        });
    }

    else if ($(window).scrollTop() == 0) {
       //Call your event here
         $div.css({
             position:'relative'
              });
           $div.animate({
            top: '0px'
        },500);
    }   
});