个人中心
gpt4 book ai didi

html - 如何在向下滚动时调整导航栏 Logo 的大小

转载 作者：太空宇宙 更新时间：2023-11-04 13:40:14 26 4
gpt4 key购买 nike

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

 <!-- 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 个像素时触发。

将此脚本放在您的 <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'>

关于html - 如何在向下滚动时调整导航栏 Logo 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42460930/

26 4 0
文章推荐： html - CSS3动画，图片移动后消失
文章推荐： c++ - 为什么我们需要使用 std::vector::pointer 来访问元素？
文章推荐： html - 如何处理在 HTML 表单中选择了哪个按钮？
文章推荐： c++ - Mac/iOS收不到UDP广播包，但可以发送UDP广播包