Question

我想在scrolltop等于零时更改徽标和标题背景的大小。第一个条件是可行的，但是当它返回顶部时则不可行。该如何解决？

$(document).ready(function(){

    $(window).scroll(function(){
        var windowheight = $('html ,body').scrollTop();
        console.log(windowheight);
        if (windowheight > 40){
            $('#headers').css('background-color', 'red'); 
            $('#logoimages').animate({
                'width': '100px'
            }, 500);
            $('#sociallinks').fadeOut();  
        }
        else {
            $('#sociallinks').fadeIn();
            $('#headers').stop().animate({'background-color': "rgba(34,193,195, 0.5)"}, 500);
            $('#logoimages').stop().animate({'width': '100px'},500);
        }
    });
});

Answer 1

我已经测试了代码，并且我认为在需要做一些更简单的事情时，使用CSS“过渡”比jQuery“动画”要容易得多！

我对其进行了测试，并以这种方式为我工作：

$(document).ready(function(){
    
    //adds CSS transition to elements that need animation
    $('#headers,#logoimages').css({"transition": "all 0.5s ease"}); 
    
    $(window).scroll(function(){
        var windowheight = $('html').scrollTop();
        //console.log(windowheight);
        if (windowheight > 40){
            $('#headers').css({'background-color':'red'}); 
            $('#logoimages').css({'width':'100px'});
            $('#sociallinks').fadeOut();  
        }
        else {
            $('#sociallinks').fadeIn();
            $('#headers').css({'background-color':"rgba(34,193,195,0.5)"});
            $('#logoimages').css({'width':'200px'});
        }
    });
});

/*only for this test*/

#logoimages{
	background:red;
	width:200px;
}
#headers{
	background:rgba(34,193,195, 0.5);
}

<!-- only for this test -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="headers">headers</div>
<div id="logoimages">logoimages</div>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.

我将jQuery的“动画”更改为“过渡：所有0.5秒的缓解时间”。

如果将其添加到CSS中，甚至不需要在上面的javascript中添加它，并且所有语法都更好：

#logoimages,#headers{
    transition:all 0.5s ease;
}

希望这会有所帮助！

当页面在jquery上滚动到顶部时，如何制作动画？

1 个答案: