bootstrap 4导航栏固定在顶部，在滑块上透明，并且在滑块外面带有背景

Question

我想创建固定在视口顶部但具有透明背景的导航栏，因此下面的滑块没有被覆盖，但是在导航页滑出轮播滑块后，我希望它获得一些背景。

我应该使用哪些容器和哪些位置样式？谢谢。

Answer 1

请找到以下代码。它会帮助你。

XMMatrixScaleFromVector()

jQuery(window).scroll(function() {
  var scrolled = jQuery(window).scrollTop();
  // var scrolled = $(window).scrollBottom();
  if(scrolled >= 500) {
    jQuery('body').addClass('sticky-header');
  }
  else {
    jQuery('body').removeClass('sticky-header');
  }
});

body {
  margin:0;
}
* {
  box-sizing: border-box;
}
header {
  display: inline-block;
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  text-align: center;
  color: #FFF;
}
.sticky-header header {
  background-color: blue;
}
.slider {
  height: 500px;
  width: 100%;
  display: inline-block;
  background-color: red;
}