Question

好吧，我有一个非常简单的代码，当你位于页面顶部时，#header有background-color:transparent;，并且你开始向下滚动，它有静态的黑色。它工作得很好，但每当我刷新页面时，标题都是黑色而不是透明....我试图从顶部高度滚动偏移，但仍然没有。（当我刷新它时，它有黑色，当我向下滚动，仍然是黑色，但当我再次滚动到顶部时，它在顶部工作，我有颜色透明。[它开始工作时我只是使用滚动按钮移动，但不是从页面上的{landing}开始...）...有我的代码：

JS：

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

css（标题）

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

HTML：

<div class="container">
        <!--HEADER-->
        <div id="header">
            <div id="main">
                <a href="index.html"><img src="images/my_logo.png"></a>
            </div>
            <div id="menu">
                <img name="menu" src="images/my_menu.png">
            </div>
        </div>
        <!--/HEADER-->

Answer 1

目前，滚动页面时只运行该功能。您还需要在页面加载上运行您的函数...

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

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

根据@Quantiastical的评论，这可能是更好的代码，因为它将涵盖更多事件并将您的功能保存在一个地方......

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

Answer 2

嗯，我找到了我的解决方案，这是最好的。只需将css中标题的背景颜色更改为透明，所以...当页面加载自身时，标题没有外观，当我开始滚动时，事件处理程序启动并且jQuery完成它的工作:)很容易作为一个馅饼

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

刷新页面时标题外观无效

2 个答案: