页面刷新时导航栏背景消失

Question

所以现在我有一个导航栏，当它位于页面顶部时会淡出，当您滚动时它会淡入。这很好，但是当您刷新页面时导航栏不在顶部页面，导航栏背景再次消失，因为您需要滚动才能触发该功能。有没有一种方法可以在不使用滚动事件的情况下完成同样的事情？或者一种使用滚动功能的方法，但在刷新页面并且导航栏不在页面顶部时也将栏不透明度保持为 1。提前谢谢你。

JQUERY

$(document).ready(function(){
        var navbar = $(".navcontainer");
        $(window).scroll(function(){
           var scrollPosition = $(window).scrollTop();
           if (scrollPosition === 0){
              navbar.css("background-color", "rgba(32, 52, 74, 0");
           }else {
              navbar.css("background-color", "rgba(32, 52, 74, 1");
          }
       });
  });

CSS

.navcontainer{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 1;
  transition: background-color .2s ease-in-out;
}

Answer 1

我建议你这样做。通过这种方式，您可以在页面加载和滚动事件中重用该方法

$(document).ready(function () {
    checkHeaderStatus()
    $(window).scroll(function () {
        checkHeaderStatus()
    });
});

function checkHeaderStatus() {
    var navbar = $(".navcontainer");
    var scrollPosition = $(window).scrollTop();
    if (scrollPosition === 0) {
        navbar.css("background-color", "rgba(32, 52, 74, 0");
    } else {
        navbar.css("background-color", "rgba(32, 52, 74, 1");
    }
}

页面刷新时导航栏背景消失

Navigation Bar background disappears when page refreshes

css

jquery

scroll

function

nav