Question

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

JQUERY

final implicit val tuple = {
    ("x" === "y") -> 0
}

CSS

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

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

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

1 个答案: