Question

我正在尝试将导航栏粘贴到第一部分和后续部分的顶部。我不希望导航栏位于英雄的顶部，但我确实希望它在下一部分滚动到时出现在导航栏上。然后，我希望它在其余部分中保持不变。请帮忙。谢谢。

这是HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;1,700&display=swap" rel="stylesheet">
</head>
<body>

    <div class="header">
        <div class="hero">
            <h1>We're Digital Star Makers.</h1>
            <p>Industry-leading prestige starts with exceptional consistency from web to workflow. </p> 
            <button><a href="#">Let's Get Started</a></button> 
        </div> 
    </div>
    <div class="navbar">
        <div class="menu">
            <img class="logo" src="/Akachi_Logo.png"/>
            <ul>
                <li class="active">Home</li>
                <li>Services</li>
                <li>Product</li>
                <li>Contact</li>
            </ul>
        </div>
    </div>
    <section class="features">

这是CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto Condensed', sans-serif;
}


.hero {
    background-image: url('/Akachi_BG_IMG_COVER.png');
    max-height: 100vh;
    background-size: cover;
    background-position: center;
}

.header h1 {
    font-size: 6rem;
    font-weight: 40rem;
    width: 75rem;
    position: absolute;
    margin: 17rem 5rem;
    font-family: 'Roboto', sans-serif;
    color: #DBC385;
}

.header p {
    font-size: 4rem;
    width: 68rem;
    position: absolute;
    margin: 26rem 5rem;
    color: #DBC385;
}

.header button {
    margin: 44rem 5rem;
    color: purple;
    padding: 2rem 4rem;
    background: #DBC385;
    font-size: 2.2rem;
    border: 0.3rem solid #DBC385;
    border-radius: 1rem;
    cursor: pointer;
}

.header button a {
    text-decoration: none;
}

}.header button:hover {
    background: #ffbf00;
}

section {
    height: 160vh;
    background: lightblue;
    margin: 0;
    position: relative;
}


.navbar {
    width: 100%;
    height: 15rem;
    background: #DBC385;
    position: relative;
}


/* former bg color: #42455a   */


.menu ul {
    display: inline-flex;
    margin: 5rem;
    font-size: 2rem; 
    float: right;
}

.menu ul li {
    list-style: none;
    margin: 0 2rem;
    color: purple;
    cursor: pointer;
    float: right;
    /*  former color:  #b2b1b1  */   
}

.logo {
    width: 7rem;
    margin-top: 2rem;
    margin-left: 5rem;
}

a:hover {
    color: #19dafa;
}

导航栏不粘贴到部分顶部

0 个答案: