Question

所以我有一个带有徽标的导航栏。当用户位于页面的标题部分时，我希望徽标变大，但是当用户向下滚动时，徽标会缩小。有什么办法吗？

 <!-- 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>

Answer 1

您可以使用常规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'>

Answer 2

您可以使用JQuery实现此目的 -

$(document).scroll(function() {
    $('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});

explanation- 滚动时 - 获取navbar元素，按如下方式更改它的CSS：如果scrollTop（）＆lt; 100（我们不在页面顶部） - 将宽度更改为50％。否则将其更改为100％（常规）

Answer 3

请记住，到目前为止建议的解决方案将在每个滚动事件（数字甚至数千次）上应用css，从而降低滚动平滑度/性能。

我对Robin Wright的解决方案做了一点补充，你可以找到here来测试它的小提琴。这样可以确保仅在越过标题边框时应用css（在本例中为150px）。

代码如下：

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。在小提琴中，我还添加了徽标的过渡。

Answer 4

很抱歉破坏派对，但是即使w3schools提出了类似的建议，但在javascript中为复杂的设计设置高度或宽度也会给您带来数百种样式分配。确保它适用于简单的事情。当您同时拥有移动浏览器（关键字“响应式设计”）时，请考虑一下此解决方案-您将怎么做？ Javascript不是设置某些实际大小或距离的正确位置。我只想做一件事：只向body元素添加一个类，并在向后滚动时将其删除。使用其他解决方案，我将对每个滚动事件进行多次调整，这很多。因此，添加类的效率更高（适用于现代浏览器，对于IE 9或更低版本，您必须执行其他操作）：

    window.onscroll = function() {scrollFunction()};
    
    function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.body.classList.add("minilogo");
        } else {
            document.body.classList.remove("minilogo");
        }
    }

然后在CSS中，您可以设置适当的宽度和高度，顶部和左侧以及其他任何值，例如：

body.minilogo .navbar-brand img {
    width: 30px;
}

其他注意事项：

使用这种简单的if scrolled then ... else 解决方案在某些特殊情况下可能会出现问题，即可能会发生闪烁，如果通过调整徽标的大小可以使空间足够大，从而减少滚动，从而使{{1 }}如果用户尝试滚动，则再次按下case并到达一个循环（很难描述，但是您看到这是一个特例）。因此，在这样的else情况下添加else会很有用：

if

对于出现以下情况的情况，这将避免此类循环

if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.body.classList.add("minilogo");
    } 
} else if (document.body.scrollTop < 10 && document.documentElement.scrollTop < 10) {
    document.body.classList.remove("minilogo");
}

请注意，当您向下滚动时，某些浏览器（如iPad Safari）会使URL区域等不可见，这会使您的站点有更多可用空间，从而也降低了滚动值。当用户继续滚动时，这也可能导致调整大小的周期。我认为所有Safari iOS都一样，它具有这种橡皮筋滚动机制，可以滚动到不合理的值上方，然后像加载的弹簧一样跳回原始位置。因此，还必须考虑最大可用滚动值。

最终解决方案 因此，最后我提出了以下解决方案，该解决方案令我满意，并且没有闪烁（需要JQuery）：

normal logo height in pixels - small logo height in pixels < 40 pixels.

花了我很多时间，所以请尽情享受吧！

如何在向下滚动时调整导航栏徽标的大小

4 个答案: