Question

我尽一切可能创建一个透明的导航栏，动画向下滚动网页时。我在此处添加的标记来自这里的另一个人想要相同类型的导航栏，但我尝试过它，它没有用。因此，经过很多尝试，我完全没精打采了选项。谁能提供任何建议？提前致谢。我的HTML：

<nav class="navbar navbar-dark bg-dark navbar-expand-lg" data- toggle="affix">
  <a class="navbar-brand" href="#"><img src="myofficiallogo.jpg" height="100px" width="100px"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria- label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

我的CSS

.navbar {
    -webkit-transition: padding 0.2s ease;
    -moz-transition: padding 0.2s ease;
    -o-transition: padding 0.2s ease;
    transition: padding 0.2s ease;
  }

  .affix {
    padding-top: 0.2em !important;
    padding-bottom: 0.2em !important;
    -webkit-transition: padding 0.2s linear;
    -moz-transition: padding 0.2s linear;
    -o-transition: padding 0.2s linear;
    transition: padding 0.2s linear;
  }

  section {
    min-height: calc(100% - 70px);
  }

我的js：

$('[data-toggle="affix"]').each(function() {
  var ele = $(this),
  wrapper = $('<div></div>');

  ele.before(wrapper);
  $(window).on('scroll resize', function() {
    toggleAffix(ele, $(this), wrapper);
  });

  // init
  toggleAffix(ele, $(window), wrapper);
});

向下滚动滚动引导菜单

0 个答案: