Question

我有一个启动display:none的div。我希望它在滚动显示并在页面顶部向下动画（这是一个固定的位置菜单）。

我可以在滚动时显示它，但我无法弄清楚动画。

$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = 120;
        var bottom_of_window = $(window).scrollTop();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            if ($(this).css('opacity')==0) {$(this).fadeTo(0,1);}
        } else {
            if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide();}
            }    
    }); 
});

我可能正在关注$(this).animate，但我真的不知道自己在做什么，也不知道将其纳入我现有的代码中。需要动画：将div的顶部从顶部-66px移动到0px。

HTML：

<div class="hideme" style="display:none; z-index:4000; position:fixed; background-color:rgba(255, 102, 0, 0.95); top:0px; height:66px; width:100%; left:0%; border-bottom:1px solid rgba(255, 255, 255, 0.5)">
<A href="index"><img src="logo_01_151_45.png" alt="logo" style="position: fixed; top:10px; left:50%; margin-left:-490px"/></A>
</DIV>

非常感谢您提供的任何帮助。谢谢。

Answer 1

解决：

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = 120;
        var bottom_of_window = $(window).scrollTop();

        /* If the object is completely visible in the window, fade it it */
        if( bottom_of_window > bottom_of_object ){

            if ($(this).css('opacity')==0) {$(this).fadeTo(0,1).animate({top:'0px'});}
        } else {
            if ($(this).css('opacity')==1) {$(this).fadeTo(0,0).hide().animate({top:'-66px'});}
            }


    }); 

});

JS - 出现＆amp;活跃

1 个答案: