Question

我想问您一个支持。我创建了一个带有菜单的模板，该模板使用bootsrap sticky-top类。
-菜单具有透明背景 -整个页面的背景图像都是固定的

现在，当我滚动页面时，一切都很好，导航栏移到顶部，然后粘住-停留在浏览器的顶部，但是我想在此添加其他功能。这个想法是这样的：当透明标题放在顶部时，滚动页面时所有内容都隐藏在它后面（变得不可见）（带有菜单的导航栏保持/保持透明）。

如何实现？任何想法...

Answer 1

要实现此目的，您可以使用Javascript计算滚动的高度，并根据数值在滚动发生时应用CSS样式。

$(window).scroll(function(){
  if ($(window).scrollTop() > 50) {
    $(".box").css("position","fixed");
   } else {
   $(".box").css("position","relative");
   }
});

.background {
  display:block;
  background-color:#333;
  height:1000px;
  width:100%;
}

.box {
  display:block;
  background-color:orange;
  width:100%;
  height:50px;
  opacity:.5;
  margin-top:-8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="background"></div>

透明菜单涵盖页面内容

1 个答案: