twitter-bootstrap 如何在向下滚动时调整导航栏徽标的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42460930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resize navbar logo on scroll down
提问by Rudi Thiel
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>
回答by Robin Wright
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.
你可以用普通的 JS 做到这一点。您可以以像素精度触发更改，我的示例将在距离顶部 5 个像素时触发。
Place this script in your <head>.
将此脚本放在您的<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>
and replace <img src="Images/logo.png" width="60px">with <img src="Images/logo.png" style="width:60px" id='Logo'>
并替换<img src="Images/logo.png" width="60px">为<img src="Images/logo.png" style="width:60px" id='Logo'>
回答by Shtut
You can achieve this using JQuery-
您可以使用 JQuery 来实现这一点-
$(document).scroll(function() {
$('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});
explanation- When scrolling- get the navbar element, change it's CSS as follows: if scrollTop() < 100 (we're not at the top of the page) - change the width to 50%. Otherwise change it to 100% (regular)
解释 - 滚动时 - 获取导航栏元素，将其 CSS 更改如下：如果 scrollTop() < 100（我们不在页面顶部） - 将宽度更改为 50%。否则将其更改为 100%（常规）
回答by Chri.s
Bare in mind that the suggested solutions so far will apply the css on every single scroll event (literally hundreds or even thousands of times), decreasing scrolling smoothness/performance.
请记住，到目前为止，建议的解决方案会将 css 应用于每个滚动事件（实际上是数百甚至数千次），从而降低滚动平滑度/性能。
I've made a little addition to the solution from Robin Wright which you can find a fiddle of hereto test it. This ensures that the css is only applied when you cross the border of the header (in this case 150px).
我对 Robin Wright 的解决方案做了一些补充，你可以在这里找到一个小提琴来测试它。这确保仅当您越过标题的边界（在本例中为 150 像素）时才应用 css。
The code is the following:
代码如下：
window.onscroll = function() {
growShrinkLogo()
};
var Logo = document.getElementById("Logo");
var endOfDocumentTop = 150;
var size = 0;
function growShrinkLogo() {
var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (size == 0 && scroll > endOfDocumentTop) {
Logo.style.width = '30px';
size = 1;
} else if(size == 1 && scroll <= endOfDocumentTop){
Logo.style.width = '60px';
size = 0;
}
}
PS. in the fiddle i've also added a transition for the logo.
附注。在小提琴中，我还为徽标添加了过渡。
