HTML 代码中的 Sticky Header 不起作用答案

【问题标题】：Sticky Header in HTML code is not workingHTML 代码中的 Sticky Header 不起作用
【发布时间】：2022-01-30 13:32:08
【问题描述】：

我的 HTML/CSS 代码有问题。我刚刚添加了一个导航栏（直到现在只有桌面）并且“粘性导航栏”不起作用。

这里是完整的 HTML 代码（CSS 如下）：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

/* Code by Vincent Photography */

.header {
    height: 720px;
    background-image: url(../images/header-background-edited.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 70% 30%;
}


/* Navigation */

.header {
    
}

.background-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    top: 0; 
    position: sticky;
}

.header-navbar-links {
    float: right;
    margin-top: 30px;
    display: none;
    font-size: 18px;
}

@media (min-width: 750px) {
    .header-navbar-links {
        display: block;
    }
}

.header-navbar-links a {
    color:rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    padding: 15px 20px;
    transition: all 0.3s;
}

.header-navbar-links a:after {
    background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 50%;
      position: absolute;
      background: rgb(26,131,93);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }
    .header-navbar-links a:hover:after { 
      width: 100%; 
      left: 0;
    }

.header-navbar-links a:hover {
    color: rgb(26,131,93);
}

.header-navbar-links li {
    float: left;
    list-style: none;
    margin-left: 26px;
}

.header-logo {
    margin-top: 30px;
    float: left;
}

.header-logo-link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: bold;
    transition: all 0.4s;
}

.header-logo-link:hover {
    color: rgb(26,131,93);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALPHA AUGMENTED SERVICES</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="skeleton/skeleton.css">
    <link rel="stylesheet" href="skeleton/normalize.css">
</head>
<body>
    <header class="header">
        <div class="background-header">
            <div class="container">
                <nav class="header-navbar">
                    <div class="header-logo">
                        <a href="#" class="header-logo-link">Alpha</a>
                    </div>
                    <ul class="header-navbar-links">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="services.html">Our services</a></li>
                        <li><a href="about.html">About us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div class="slogan">
        <div class="slogan">

        </div>
    </div>
    <div class="container">
        <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    </div>
    <script defer src="js/app.jss"></script>
</body>
</html>

让你知道。我正在使用 CSS 工具 Skeleton。有关更多信息，您可以访问此网页：getskeleton.com

【问题讨论】：

什么不起作用？请多解释一些。看起来它工作得很好。
颜色：rgb(255, 255, 255);是白色的，不是吗？你的字体在白色背景上有那种颜色。
哦不！它应该是白色的，但你的背景没有任何高度！

标签： html css web

【解决方案1】：

你没有设置.background-header的高度。

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}

/* Code by Vincent Photography */

.header {
    height: 720px;
    background-image: url(../images/header-background-edited.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 70% 30%;
}


/* Navigation */

.header {
    
}

.background-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    top: 0; 
    position: sticky;
    height: 100px;
}

.header-navbar-links {
    float: right;
    margin-top: 30px;
    display: none;
    font-size: 18px;
}

@media (min-width: 750px) {
    .header-navbar-links {
        display: block;
    }
}

.header-navbar-links a {
    color:rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    padding: 15px 20px;
    transition: all 0.3s;
}

.header-navbar-links a:after {
    background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: 50%;
      position: absolute;
      background: rgb(26,131,93);
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }
    .header-navbar-links a:hover:after { 
      width: 100%; 
      left: 0;
    }

.header-navbar-links a:hover {
    color: rgb(26,131,93);
}

.header-navbar-links li {
    float: left;
    list-style: none;
    margin-left: 26px;
}

.header-logo {
    margin-top: 30px;
    float: left;
}

.header-logo-link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: bold;
    transition: all 0.4s;
}

.header-logo-link:hover {
    color: rgb(26,131,93);
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALPHA AUGMENTED SERVICES</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="skeleton/skeleton.css">
    <link rel="stylesheet" href="skeleton/normalize.css">
</head>
<body>
    <header class="header">
        <div class="background-header">
            <div class="container">
                <nav class="header-navbar">
                    <div class="header-logo">
                        <a href="#" class="header-logo-link">Alpha</a>
                    </div>
                    <ul class="header-navbar-links">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="services.html">Our services</a></li>
                        <li><a href="about.html">About us</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div class="slogan">
        <div class="slogan">

        </div>
    </div>
    <div class="container">
        <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <br>
    <h1>
        Lorem Ipsum
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <br>
    </div>
    <script defer src="js/app.jss"></script>
</body>
</html>

【讨论】：