我有带有大徽标的标题，我想在滚动超过 100px 后将其变小，这工作正常但不流畅，我怎样才能做到平滑？
我的代码：-
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px;}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>
Solution
transition: all linear .5s
解释
你可以看看transitionCSS 中的属性。
考虑到上面的解决方案，以下是语法的细分：
1) transition-property：定义要为哪个属性设置动画。它可以是单个属性、多个属性或all;
2) transition-timing-function：要使用的过渡函数，它将定义动画如何发生；
3) transition-delay：定义动画需要多长时间才能完成；
参考
使用 CSS 过渡 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Example
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$('header').addClass('fixed-header');
}
else{
$('header').removeClass('fixed-header');
}
});
});
header{ padding:0px; position: sticky; top:0px; left:0px; background: #FFF; z-index: 1000;}
header.fixed-header{box-shadow: 20px 4px 10px rgba(39, 59, 69, 0.2);}
header .logo img{width:200px; transition: all linear .5s}
header.fixed-header .logo img{width:100px;}
.box-height{ height:500px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="col-md-4">
<a href="#" class="logo"><img src="https://www.freepnglogos.com/uploads/google-logo-png-hd-11.png"></a>
</div>
</header>
<div class="box-height"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
