我正在为网站创建导航栏，但我似乎无法让它工作。当您在网站上向下滚动时，我希望 Logo 缩小。我试过 webkit 动画的东西，还有一些 javascript/jQuery 函数，但他们不想合作。这是我玩过的当前功能，但它似乎并不喜欢它。我该如何解决？
HTML:
<html>
<body>
<script>
$(document).on("scroll", function() {
if($(document).scrollTop() >= 1)
{
$(".nav .logo img").css('-webkit-transform', 'scale(.5, .5');
$(".nav .logo img").css('-ms-transform', 'scale(.5, .5');
$(".nav .logo img").css('transform', 'scale(.5, .5');
}
else
{
$(".nav .logo img").css('-webkit-transform', 'scale(1, 1');
$(".nav .logo img").css('-ms-transform', 'scale(1, 1');
$(".nav .logo img").css('transform', 'scale(1, 1');
}
});
</script>
<div class="nav">
<div class = "logo">
<a href = "index.html"><img src="Pics/siren.png" alt="" width="196" height="196"/></a>
</div>
</div>
</body>
</html>
CSS:
.nav{
position: fixed;
top: 0;
z-index: 1;
width: 100%;
height: 100px;
}
.nav .logo{
position: fixed;
text-align: left;
z-index: 2;
top: 0;
bottom: 100px;
overflow: hidden;
opacity: .5;
}
最佳答案
你可以用 jQuery 做这样的事情:
$(document).on('scroll', function() {
if ($(document).scrollTop() >= 10) {
$('.logo img').css('width', '50px');
} else {
$('.logo img').css('width', '');
}
});
完整示例在这里:https://jsfiddle.net/sL89qxcx/
关于javascript - 在页面上向下滚动时如何调整图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37510651/