css - 向下滚动时切换导航栏的CSS

Question

我正在尝试通过修改 Bootstrap CSS 文件来制作固定的导航栏。如果我向下滚动，导航栏的颜色应该更改并固定在顶部。

所以我引用this article添加了如下JS代码但它不起作用。

let MQL = 992;

if ($(window).width() > MQL) {
  let headerHeight = $("#mainNav").height();

  $(window).scroll(function () {
    if ($(document).scrollTop() > headerHeight) {
      $("#mainNav").addClass("is-visible");
    } else {
      $("#mainNav").removeClass("is-visible");
    }
  });
}

#mainnav是导航栏的CSS，is-visible是显示navbar的CSS动画。 992 是桌面屏幕的最小宽度。

JSFIDDLE

我该如何解决？

Answer 1

请在此处检查工作解决方案。

    var headerHeight = $(".clearHeader").height();


$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= headerHeight) {
        $(".clearHeader").addClass("is-visible");
    }else{
      $(".clearHeader").removeClass("is-visible");
    }
});

 

    .clearHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}


.is-visible {height: 100px;background-color:#1e1e1e}


.wrapper {
height:2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="clearHeader">
</header>

<div class="wrapper">
</div>