向下滚动时切换导航栏的 CSS答案

【问题标题】：Switching CSS of navigation bar when scrolling down向下滚动时切换导航栏的 CSS
【发布时间】：2019-03-16 16:00:57
【问题描述】：

我正在尝试通过修改 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 是显示导航栏的 CSS 动画。 992 是桌面屏幕的最小宽度。

JSFIDDLE

我该如何解决这个问题？

【问题讨论】：

你的fiddle连JS和HTML都没有，怎么回事？
@Justinas 因为它依赖于Bootstrap文件所以代码会很长，我添加了JS/HTML代码sn-p。

标签： css

【解决方案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>

【讨论】：

您的答案具有硬编码值 - 与 OP 在其代码中的值相反。如果我的标题是动态高度怎么办？
@NBlizz 有帮助吗？
如果对您有解决方案，请将其标记为答案。