Rud*_*iel 3 html css twitter-bootstrap
所以我有一个带有徽标的导航栏.当用户位于页面的标题部分时,我希望徽标变大,但是当用户向下滚动时,徽标会缩小.有什么办法吗？
<!-- 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>
小智 7
你可以用普通的JS做到这一点.您可以使用像素精度触发更改,我的示例将在距离顶部5个像素时触发.
将此脚本放入您的<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'>
| 归档时间： |
|
| 查看次数： |
16645 次 |
| 最近记录： |