Javascript 滚动时调整徽标大小

我使用以下代码在向下滚动页面时更改徽标的大小

$（文档）.on（'scroll'，function（）{
如果（$（文档）.scrollTop（）>=10）{
$（'.logo img'）.css（'width'，'50px'）；
}否则{
$（'.logo img'）.css（'宽度'，''）；
}
});
.nav{
位置：固定顶：0；
z指数：1；
宽度：100%；
}
.导航标志{
位置：固定；
文本对齐：左对齐；
z指数：2；
排名：0；
溢出：隐藏；
不透明度：.5；
}
.集装箱{
填充顶部：120px；
高度：500px；
}

乱数假文
为您提供一些建议：

避免使用
.css（）
作为一般规则设置样式（当然，例外情况适用）。相反，考虑在CSS中定义一个类，例如<代码>小标识{宽度：8% } <代码>，并使用<代码> .AddioCube（）/<代码>。

这有一个方便的副作用，即如果已经添加了该类，则不会再次添加该类

反过来，这允许您设置
过渡：宽度0.4缓进缓出或类似内容。这将提供您所要求的平稳过渡

CSS很有趣
 实现这一点的最佳方法是使用CSS转换，因为它们是硬件加速的，并且可以更好地分离关注点。然后可以通过在JS中添加/删除类来切换动画

重要的部分是将
宽度
和
转换
规则添加到
.logo img
元素的默认状态。然后可以在添加的类中修改该
宽度。试试这个：


$（文档）.on（'scroll'，function（）{
$（'.logo img'）.toggleClass（'small'，$（document.scrollTop（）>=10）；
});
.nav{
位置：固定顶：0；
z指数：1；
宽度：100%；
}
.导航标志{
位置：固定；
文本对齐：左对齐；
z指数：2；
排名：0；
溢出：隐藏；
不透明度：.5；
}
.导航标志img{
宽度：100px；
过渡：宽度0.3s；
}
.导航标志img.small{
宽度：50px；
}
.集装箱{
填充顶部：120px；
高度：500px；
}

乱数假文
查看jquery动画。查找CSS转换。我认为您的选择器应该是
。logo a img
，因为
img
标记位于锚定标记内。感谢大家这么快的访问。我有一个解决办法。