刷新页面时页眉显示不起作用

Header appearence not working when refreshing the page

本文关键字：显示 不起作用 刷新      更新时间：2023-09-26

好吧，我有一个非常简单的代码，可以做一些类似。。。当你在页面顶部时，#header有background-color:transparent;，当你开始向下滚动时，它有静态的黑色。它工作得很好，但每次刷新页面时，页眉都是黑色而不是透明的。。。。我试着从最上面的高度开始滚动，但仍然没有。（当我刷新它时，它是黑色的，当我向下滚动时，仍然是黑色，但当我再次滚动到顶部时，它就在顶部工作，并且我的颜色是透明的。[当我只是用滚动按钮移动时，它开始工作，但不是从开始{着陆}在页面上]）。。。这是我的代码：

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-->

目前您只在滚动页面时运行函数。你还需要在页面加载上运行你的函数。。。

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

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

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

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

好吧，我找到了我的解决方案，这是最好的。只需将css中页眉的背景色更改为透明，因此……当页面加载时，页眉没有外观，当我开始滚动时，事件处理程序启动，jQuery完成其工作：）简单如饼

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