Question

我试图让Bootstrap 4粘性导航栏首先变得透明。我想看到后续section元素的背景颜色。当用户开始滚动（> 50px）时，我希望导航栏淡化为白色。

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

这是我到目前为止的代码：

<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%;
}

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

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

1 个答案: