How can I make the header stick throughout the Page-CodePudding

I'm trying to make the header stick on the top, throughout the page. And It works fine till but the PROBLEM is after first section the header element become hidden.

I have included some part of the code hope it'll help you understand my problem.

*{
    box-sizing: border-box;
}
:root {
    --primary-color: #b90415;
    --primary-color-hover: #d3071b;
    --secondary-color: #103063;
    --secondary-color-hover: #143f85;
    --light-color: #f4f4f4;
    --spotify-green:rgba(30, 215, 96,0.9);
}

html,body{
    font-family: 'Nunito',sans-serif;
    width: 100%;
    margin: 0;
    height: 100%;
    line-height: 1.9em;
    color: var(--light-color);
    scroll-behavior: smooth;
}
/*For all Links*/
a{
    text-decoration: none;
    color: #ffffffaf;
}
/*For all unorder-List*/
ul{
    list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
header{
    position: sticky;
    top: 0;
    left: 0;
    background-color: #252529;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 0 10px 0 #00000055;
    z-index: 3;
}
.icon2{
    visibility: hidden;
    position: absolute;
    right: 0;
}
span, .icon {
    vertical-align: middle;
}
.icon:hover{
    opacity: 0.3;
}
#top-nav ul{
    margin: 0;
}
#top-nav ul li{
    float: left;
}
#top-nav ul li a{
    display: inline-block;
    font-weight: 650;
    padding: 7px 13px;
    transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
    background-color: var(--spotify-green);
    color: #000;
}
/*=======================section style=======================*/
.section{
    background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
    height: 100%;
    text-align: center;
    font-size:x-large;
    padding: 180px 0;
}
.section p{
    margin: 50px auto;
    width: 74%;
}
/*================================================================*/
.product-descr{
    background-color: #252529;
    text-align: center;
    font-size: larger;
    display: flex;
    flex-direction: column;
}
.product-descr p{
    margin: 50px auto 15px auto;
    width: 74%;
}
.btn{
    display: block;
    margin: 15px auto 15px auto;
    width: fit-content;
    padding: 15px 10px;
    background-color: rgba(30, 215, 96,0.3);;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: large;
    transition: 0.4s;
}
.btn:hover{
    background-color: var(--spotify-green);
    border: 1px solid black;
    font-weight: bold;
    color: #000;
}
img{
    width: 53%;
    margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/

<!DOCTYPE html>
<html lang="en-IND">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <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=Source Sans Pro&family=Inter:wght@300&family=Nunito:wght@300&family=Ubuntu&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
    <title></title>
</head>
<body>
    <header>
        <nav id="top-nav">
            <ul>
                <li><a  href="index.html"><span >home</span></a></li>
                <li ><a href="index.html">Home</a></li>
                <li ><a href="mytunes.html">MyTunes</a></li>
                <li ><a href="#b1">Overview</a></li>
                <li ><a href="#b2">Music</a></li>
                <li ><a href="#b3">Video</a></li>
                <li ><a href="#b4">Gift Cards</a></li>
            </ul>
            <ul>
                <li ><a  href="#"><span >menu</span></a></li></ul>
        </nav>
    </header>

    <div >
        <h1>Let it <span>Rythm</span></h1>
        <h3>Your music, movies, and TV shows take center stage.</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
    </div>
    
    <div id="b1" >
        <span ></span>
        <h2>Music</h2>
        <h2>45 Million songs. Zero Ads</h2>
        <p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
        <div >Start Free Trial Now</div>
        <caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
        <img src="mockup1.png" alt="" width="750">
    </div>

</body>
</html>

CodePudding user response：

The header should be position:fixed instead of position: sticky

header{
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%; /*set width 100% for the entire header*/
    background-color: #252529;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 0 10px 0 #00000055;
    z-index: 3;
}

*{
    box-sizing: border-box;
}
:root {
    --primary-color: #b90415;
    --primary-color-hover: #d3071b;
    --secondary-color: #103063;
    --secondary-color-hover: #143f85;
    --light-color: #f4f4f4;
    --spotify-green:rgba(30, 215, 96,0.9);
}

html,body{
    font-family: 'Nunito',sans-serif;
    width: 100%;
    margin: 0;
    height: 100%;
    line-height: 1.9em;
    color: var(--light-color);
    scroll-behavior: smooth;
}
/*For all Links*/
a{
    text-decoration: none;
    color: #ffffffaf;
}
/*For all unorder-List*/
ul{
    list-style-type: none;
}
/*=====================Top navigation-bar style=====================*/
body div{
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #252529;
    overflow: hidden;
    margin: 0;
    box-shadow: 0 0 10px 0 #00000055;
    z-index: 3;
}
.icon2{
    visibility: hidden;
    position: absolute;
    right: 0;
}
span, .icon {
    vertical-align: middle;
}
.icon:hover{
    opacity: 0.3;
}
#top-nav ul{
    margin: 0;
}
#top-nav ul li{
    float: left;
}
#top-nav ul li a{
    display: inline-block;
    font-weight: 650;
    padding: 7px 13px;
    transition: 0.5s;
}
#top-nav ul li a:hover:not(.icon){
    background-color: var(--spotify-green);
    color: #000;
}
/*=======================section style=======================*/
.section{
    background-image: linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('img1.jpg');/* linear-gradient(230deg,rgba(0, 0, 0, 0.6),rgba(0,0,0, 0.8)),url('testimg.jpg');*/
    height: 100%;
    text-align: center;
    font-size:x-large;
    padding: 180px 0;
}
.section p{
    margin: 50px auto;
    width: 74%;
}
/*================================================================*/
.product-descr{
    background-color: #252529;
    text-align: center;
    font-size: larger;
    display: flex;
    flex-direction: column;
}
.product-descr p{
    margin: 50px auto 15px auto;
    width: 74%;
}
.btn{
    display: block;
    margin: 15px auto 15px auto;
    width: fit-content;
    padding: 15px 10px;
    background-color: rgba(30, 215, 96,0.3);;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: large;
    transition: 0.4s;
}
.btn:hover{
    background-color: var(--spotify-green);
    border: 1px solid black;
    font-weight: bold;
    color: #000;
}
img{
    width: 53%;
    margin: 28px auto;
}
/*=============================================================*/
/*section 3 style*/

<!DOCTYPE html>
<html lang="en-IND">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <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=Source Sans Pro&family=Inter:wght@300&family=Nunito:wght@300&family=Ubuntu&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
    <title></title>
</head>
<body>
    <header>
        <nav id="top-nav">
            <ul>
                <li><a  href="index.html"><span >home</span></a></li>
                <li ><a href="index.html">Home</a></li>
                <li ><a href="mytunes.html">MyTunes</a></li>
                <li ><a href="#b1">Overview</a></li>
                <li ><a href="#b2">Music</a></li>
                <li ><a href="#b3">Video</a></li>
                <li ><a href="#b4">Gift Cards</a></li>
            </ul>
            <ul>
                <li ><a  href="#"><span >menu</span></a></li></ul>
        </nav>
    </header>

    <div >
        <h1>Let it <span>Rythm</span></h1>
        <h3>Your music, movies, and TV shows take center stage.</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, assumenda.</p>
    </div>
    
    <div id="b1" >
        <span ></span>
        <h2>Music</h2>
        <h2>45 Million songs. Zero Ads</h2>
        <p>Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal Rythm library — no matter where it came from — lives right alongside the Rythm Music catalog. Start your free three-month trial with no commitment, and cancel anytime.</p>
        <div >Start Free Trial Now</div>
        <caption>Rythm Music is available in myTunes, and for iOS and Android devices.</caption>
        <img src="mockup1.png" alt="" width="750">
    </div>

</body>
</html>