Bootstrap 4 个粘性导航栏，下面有后续部分

Question

我试图让一个 Bootstrap 4 的粘性导航栏一开始是透明的。我想查看后续部分元素的背景颜色。当用户开始滚动（> 50 像素）时，我希望导航栏淡化为白色。

我想我快到了，但问题是后续的部分元素堆叠在导航栏下方，所以我总是看到一个白色的导航栏。如果我绝对定位后续部分，布局的其余部分也会向上。

这是我目前的代码：

<nav class="navbar sticky-top navbar-light bg-faded my-nav transparent">
  <div class="container">
    <a class="navbar-brand" href="#">
      <%= t 'website' %>
    </a>
  </div>
</nav>

<section class="hero-header">
  <div class="container">
    <h1 class="text-center"><%= t 'website' %></h1>
    <h2 class="text-center">Find me in app/views/welcome/index.html.erb</h2>
  </div>
</section>

我的 scss:

.hero-header {
  background-image: linear-gradient(138deg, #4FC3F7 0%, #27D3DD 60%, #00E3C3 100%);
  padding: 150px 0 60px 0;
  h1, h2 {
    color: white;
  }
}

@mixin nav-box-shadow($size, $blur) {
  -webkit-box-shadow: $size $size $size $size $blur;
  -moz-box-shadow: $size $size $size $size $blur;
  box-shadow: $size $size $size $size $blur;
}
@mixin nav-transition($ease) {
  -webkit-transition: all $ease ease-out;
  -moz-transition: all $ease ease-out;
  -o-transition: all $ease ease-out;
  -ms-transition: all $ease ease-out;
  transition: all $ease ease-out;
}

.my-nav {
  @include nav-box-shadow(1px, rgba(0, 0, 0, 0.2));
  @include nav-transition(0.4s);
}
.transparent {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

和我的 Coffeescript：

$(window).scroll ->
  if $(document).scrollTop() > 50
    $('nav').addClass 'bg-faded'
    $('nav').removeClass 'transparent'
  else
    $('nav').addClass 'transparent'
    $('nav').removeClass 'bg-faded'
  return

任何有关如何将部分元素正确定位在透明导航栏下方的提示都将不胜感激。或者，如果有更好的方法，请告诉我:)

Answer 1

通过添加解决：

.my-nav {
  //  ...
  position: fixed;
  width: 100%;
}

问题是sticky使用js来计算它在页面上的位置，所以它总是出现在hero-header组件之前。

Bootstrap 4 个粘性导航栏，下面有后续部分

Bootstrap 4 sticky navbar with subsequent section under it

css

coffeescript

twitter-bootstrap