JavaScript在滚动操作上隐藏div元素

Question

I'm using this bit of code to hide a menu bar when users scroll on a page. It works fine on Chrome 17.0.963.78 but keeps on flickering in and out on other browsers, namely IE firefox and safari ..

$(window).load(function(){
    $(document).scroll(function(){  
        $('#inner_floating').fadeOut();

        var scrollA = $('body').scrollTop();

        setTimeout(function(){
            if(scrollA == $('body').scrollTop()){
                $('#inner_floating').fadeIn();
            }
        }, 100);
    })
});

Answer 1

The problem is that your .scroll function is being called for every pixel (or mousewheel tick) scrolled, so the animations are being run many times consecutively.

Try something like this:

$(window).load(function(){
    $(document).scroll(function(){  
        if($("#inner_floating:hidden").length == 0) {
            $('#inner_floating').fadeOut();
        }

        var scrollA = $('body').scrollTop();

        setTimeout(function(){
            if(scrollA == $('body').scrollTop() && $("#inner_floating:hidden").length > 0){
                $('#inner_floating').fadeIn();
            }
        }, 100);
    })
});

This way the animation is only happening if necessary.