如何在向下滚动时调整导航栏徽标的大小 [英] How to resize navbar logo on scroll down
本文介绍了如何在向下滚动时调整导航栏徽标的大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我在导航栏上有一个徽标.我希望徽标在用户位于页面的页眉部分时较大，但是在用户向下滚动时缩小.有什么办法吗?
So I have this navbar with a logo on it. I would like the logo to be big when the user is in the header section of the page, but then shrink when the user scrolls down. Any way to do this?
<!-- NAVBAR -->
<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
推荐答案
您可以使用常规JS执行此操作.您可以以像素精度触发更改，我的示例将在距离顶部5像素时触发.
You can do this with regular JS. You can trigger the change with a pixel accuracy, my example will trigger when you are 5 pixels from the top.
将此脚本放在您的<head>中.
<script>
window.onscroll = function() {
growShrinkLogo()
};
function growShrinkLogo() {
var Logo = document.getElementById("Logo")
if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
Logo.style.width = '30px';
} else {
Logo.style.width = '60px';
}
}
</script>
，然后将<img src="Images/logo.png" width="60px">替换为<img src="Images/logo.png" style="width:60px" id='Logo'>
这篇关于如何在向下滚动时调整导航栏徽标的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
