Jquery Bootstrap4导航栏，向下滚动时透明，向上滚动时背景颜色，但返回顶部之前的透明

使用WordPress和Bootstrap 4的导航栏，我想添加这样的效果：页面顶部的导航栏是透明的，向下滚动时为FadeOut，向上滚动时为fadeIn（带背景色），但在到达顶部FadeOut之前为透明背景色

我使用了来自的jQuery，但我不知道如何添加“在到达顶部之前删除背景色”

示例代码：

    $(function () {
      var lastScrollTop = 0;
      var $navbar = $('.navbar');

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

        if (st > lastScrollTop) { // scroll down

          // use this is jQuery full is used
          $navbar.fadeOut()

          // use this to use CSS3 animation
          // $navbar.addClass("fade-out");
          // $navbar.removeClass("fade-in");

          // use this if no effect is required
          // $navbar.hide();
        } else { // scroll up

          // use this is jQuery full is used
          $navbar.fadeIn()

          // use this to use CSS3 animation
          // $navbar.addClass("fade-in");
          // $navbar.removeClass("fade-out");

          // use this if no effect is required
          // $navbar.show();
        }
        lastScrollTop = st;
      });
    });

最近的一个使用导航栏和div来计算滚动高度来进行更改，但我不想依赖div id

    //jQuery to collapse the navbar on scroll
    var header_height  = $('.navbar').height(),
        intro_height    = $('.intro-section').height(),
        offset_val = intro_height + header_height;
    $(window).scroll(function() {
      var scroll_top = $(window).scrollTop();
        if (scroll_top >= offset_val) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
                $(".navbar-fixed-top").removeClass("navbar-transparent");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
          $(".navbar-fixed-top").addClass("navbar-transparent");
        }
    }); 

---

谢谢大家。

您找到的示例是使用Bootstrap 3，请注意Bootstrap 3和Bootstrap 4之间有很大的区别

在bootstrap 4中，您可以添加类，如

.sticky top

以使导航栏保持粘性，

.bg transparent

以使其透明

以下是一个工作示例：

（函数（$）{
var navbar=$（'.navbar'）；
var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
//向下滚动
如果（st>lastScrollTop）{
navbar.fadeOut（）；
} 
//向上滚动，但仍低于200（将其更改为适合您需要的值）
否则如果（st200）{
navbar.fadeIn（）；
navbar.removeClass（'navbar-light bg transparent'）.addClass（'navbar-dark bg custom'）；
}
//到达顶端
否则{
navbar.removeClass（'navbar-dark bg custom'）.addClass（'navbar-light bg transparent'）；
}
lastScrollTop=st；
});
})（jQuery）
/*用于测试目的*/
身体{
高度：2000px；
}
/*设置背景色*/
.bg海关{
背景色：#333
}
/*过渡效应*/
navbar先生{
-webkit转换：所有.3s和0s；
过渡：全部3秒到0秒；
}











太好了！！谢谢。我应该在之前澄清一下，代码示例中只是我尝试的效果示例。使用代码示例，我迁移了Bootstrap4中的所有内容，并使用了WP的完整jQuery。我只是无法正确理解if-else-if语句。谢谢你的代码注释，真的很有帮助！