Bootstrap 4 粘性导航栏及其下的后续部分答案

【问题标题】：Bootstrap 4 sticky navbar with subsequent section under itBootstrap 4 粘性导航栏及其下的后续部分
【发布时间】：2017-11-19 02:38:53
【问题描述】：

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

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

这是我目前的代码：

<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

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

【问题讨论】：

只是为了校准：您的导航是否有位置：固定？
Bootstrap 4 的 .sticky-top 类生成以下内容：position: -webkit-sticky; position: sticky; top: 0; z-index: 1020;
sticky-top 不适用于所有浏览器。这是另一种方法：stackoverflow.com/a/39147077/171456

标签： css twitter-bootstrap coffeescript

【解决方案1】：

通过添加解决：

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

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

【讨论】：