Question

我有点像this这样的导航栏，它在顶部透明但滚动时会删除透明度，并显示徽标或导航栏品牌名称。

有没有办法为bootstrap执行此操作？任何帮助将不胜感激

Answer 1

您可以获取滚动顶部的位置，并显示或隐藏图像，例如this。

$(window).scroll(function(){
var scroll = $(window).scrollTop();
  if (scroll > 30){
    $("#imgLogo").css("display", "inline");
  } else {
    $("#imgLogo").css("display", "none");
  }
});

和HTML：

<nav class="navbar navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
      <img id="imgLogo" src="https://getbootstrap.com/apple-touch-icon.png" width="40"/>
    </div>
  </div>
</nav>

<div class="body">
 Bottom
</div>

Answer 2

我不确定bootstrap，但由于你的问题上有一个javascript标记我会提供一个javascript答案。：）

在DOM中，向窗口对象上的scroll事件添加一个事件侦听器。然后，只要该事件监听器触发，它就会调用一个javascript函数，该函数具有一个评估滚动值的条件语句。如果它不是零，那么删除透明度。

window.addEventListener('scroll', function(e) {

    var scrollY = window.scrollY,
        navbar = document.getElementById('navbar');

    if(scrollY > 0){
        navbar.style.opacity = "1";
    }
    else{
        navbar.style.opacity = "0";
    }

}

然后在您的CSS中，如果您想要平稳过渡，只需执行此操作

#navbar{
    /*remember vendor prefixes for transition-duration!*/
    transition-duration: 5s;
}

是否可以在导航栏中隐藏标题徽标，但在Bootstrap中向下滚动时会出现？

2 个答案: