javascript - 在滚动条上显示导航栏 : Not Shown on Reload

Question

我正在使用一些 jquery 来让 Bootstrap 4 导航栏在向下滚动超过某个点时淡入，方法是添加和删除特定类。但是，如果我重新加载已经向下滚动的页面，我的代码将不会显示导航栏，并且当向上滚动时，CSS 过渡不会淡出导航栏，而是立即弹出 View 。我该如何解决这些问题？依赖纯粹的 jquery 而不是依赖 CSS 类会更好吗？如果是这样，那将如何工作？谢谢!

JS:

    $(window).scroll(function(e) {
        if($(window).width() >= 768) 
            var scroll = $(window).scrollTop();
            if (scroll >= 300) {
                $('.navbar-home').addClass("navbar-hide");
            } else {
                $('.navbar-home').removeClass("navbar-hide");
        }
    }); 

CSS:

  .navbar-home {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
  }
.navbar-hide {
    opacity: 1;
    visibility: visible;
}

Answer 1

您还需要在页面加载时调用相同的代码。将监听器更改为:

$(window).on("scroll load", function(e) {...})