问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

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

原文由 Rudi Thiel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssbootstrap
阅读 391
2 个回答
得票最新
社区维基
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'>

原文由 Robin Wright 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

我对 Robin Wright 的解决方案做了一些补充，您可以在 此处 找到小提琴来对其进行测试。这确保了 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;
  }
}

附言。在小提琴中，我还为徽标添加了过渡效果。

原文由 Chri.s 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题