时间戳

首页 > 解决方案 > 页面刷新时导航栏背景消失

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

问题描述

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

查询

$(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;
}

标签： jquerycssfunctionscrollnav

解决方案

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

$(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");
    }
}

推荐阅读