Javascript 刷新页面时标题外观不起作用

嗯，我有一个非常简单的代码，它做了一些类似于。。。当您位于页面顶部时，

#标题

具有

背景色：透明，并且当您开始向下滚动时，它具有静态黑色。它工作得很好，但是每次我刷新页面时，标题都是黑色而不是透明的。。。。我试着在从顶部高度滚动时进行偏移，但仍然没有。（当我刷新它时，它是黑色的，当我向下滚动时，仍然是黑色，但当我再次滚动到顶部时，它在顶部工作，并且我的颜色是透明的。[当我用滚动按钮移动时，它开始工作，但不是从页面上的{landing}开始]）。。。这是我的代码：

js:

html:

此时，您仅在滚动页面时运行该功能。您还需要在页面加载上运行函数

$(function(){
  // Run it on page-loaded
  setHeaderColour();
  // Run it on scroll
  $(window).scroll(setHeaderColour);      
});

function setHeaderColour() {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
});

$（函数（）{
//在加载的页面上运行它
SetheaderColor（）；
//滚动运行它
$（窗口）。滚动（SetHeaderColor）；
});
函数setHeaderColor（）{
如果（$（窗口）.scrollTop（）<500）{
$（'#header'）.css（“背景色”，“透明”）；
}
否则{
$（'#header'）.css（“背景色”、“黑色”）；
}
});

这是因为您在客户端上所做的更改在刷新后不会被存储，页面会恢复到以前的状态。这将确保刷新后正确设置颜色


根据@Quantical的评论，这可能是更好的代码，因为它将覆盖更多事件，并将您的函数保持在一个位置

$(function(){
  $(window).on('load scroll resize orientationchange', function () {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
  });
});

$（函数（）{
$（窗口）.on（'load scroll resize orientationchange'，函数（）{
如果（$（窗口）.scrollTop（）<500）{
$（'#header'）.css（“背景色”，“透明”）；
}
否则{
$（'#header'）.css（“背景色”、“黑色”）；
}
});
});
嗯，我找到了我的解决方案，这是最好的。只需将css中标题的背景颜色更改为透明，这样。。。当页面加载自己时，标题就没有了，当我开始滚动时，事件处理程序启动，jQuery完成它的工作：）就像饼一样简单

#header {
    background-color: transparent;
    height: 75px;
    width: 100%;
    top:0px;
    position: fixed;
    z-index: 10;
    }

基本上是重复的：您希望在页面加载时触发滚动事件处理程序在你的css中？@Kenney是100%正确的，不需要其他解决方案，也可能不起作用。但是。。。我不知道如何做…可能甚至想添加更多事件
$（窗口）。在（'load scroll resize orientationchange'，SetHeaderColor）
上查看我的最终答案：）这更容易，但谢谢，您的答案也很好。。。我更喜欢我的…@Petrchihlar当一个人向下滚动，导航到另一个页面，然后点击后退按钮返回时，你可能想要测试你的答案。在不更新事件处理程序的情况下，您的页面最初将加载到滚动位置，并且在触发滚动事件之前标题将是透明的。是的，没错，我没有识别出该选项。。。你是对的，我认为这不会解决用户向下滚动、刷新或导航并返回时的问题。是的，它会。。。因为它将设置主颜色，所以当用户登陆页面时，它具有该颜色，当开始滚动时，js开始工作，它将像js中写的一样工作。。。
$(function(){
  // Run it on page-loaded
  setHeaderColour();
  // Run it on scroll
  $(window).scroll(setHeaderColour);      
});

function setHeaderColour() {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
});

$(function(){
  $(window).on('load scroll resize orientationchange', function () {
    if ($(window).scrollTop() < 500) { 
        $('#header').css("background-color", "transparent");
    }
    else{
        $('#header').css("background-color", "black");
    }
  });
});

#header {
    background-color: transparent;
    height: 75px;
    width: 100%;
    top:0px;
    position: fixed;
    z-index: 10;
    }