Прозрачное меню охватывает содержимое страницы

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>