Css Sticky position not working after apply top:0;

Question

guys Sticky Position Not working in CSS, moreover I applied for a top position. What I am trying here, creating navigation menu on-page, I want that navigation menu in a sticky position.

Below here I shared my HTML and CSS codes for your reference.

pls, find here what is the problem to resolve my problem.

* {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font: 20px Candara, sans-serif;
        background-color: whitesmoke;
        height: 2000px;
    }
    
    
    /* #homepage {
        position: relative;
        top: 0;
    } */
    
    .header {
        text-align: center;
        /* position: absolute; */
        /* top: 0px; */
        color: snow;
        padding: 1px;
        width: auto;
        /* margin-top: 00px; */
        background-color: red;
        /* background-color: whitesmoke; */
    }
    
    .navigation-panel {
        display: block;
        background-color: snow;
        position: sticky;
        /* position: -webkit-sticky; */
        /* overflow: hidden; */
        top: 0;
        /* height: 55px; */
        border: 1px solid snow;
    }
    
    .navigation-panel a {
        text-decoration: none;
        color: red;
        float: left;
        padding: 14px;
    }
    
    .navigation-panel a:hover {
        color: snow;
        background-color: brown;
        /* transition: 0.5s; */
        /* border: 1px solid snow; */
    }

 <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Sample Codings</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
        <!-- <script src='main.js'></script> -->
    </head>
    
    <body>
        <div id="homepage">
            <div class="header">
                <h1>Sample Codings</h1>
            </div>
    
            <div class="navigation-panel">
    
                <a href="">Home</a>
                <a href="">checking</a>
                <a href="">Java</a>
                <a href="">Spring</a>
                <a href="">ThreeJs</a>
    
            </div>
            <div id="content-body"></div>
        </div>
    </body>
    
    </html>

score 3 · Accepted Answer · answered May 27 '20 at 02:52

Your sticky item is correct. The problem is because your content has nothing, therefore the sticky content is scrolled along with your content.

* {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font: 20px Candara, sans-serif;
        background-color: whitesmoke;
        height: 2000px;
    }
    
    
    /* #homepage {
        position: relative;
        top: 0;
    } */
    
    .header {
        text-align: center;
        /* position: absolute; */
        /* top: 0px; */
        color: snow;
        padding: 1px;
        width: auto;
        /* margin-top: 00px; */
        background-color: red;
        /* background-color: whitesmoke; */
    }
    
    .navigation-panel {
        display: block;
        background-color: snow;
        position: sticky;
        /* position: -webkit-sticky; */
        /* overflow: hidden; */
        top: 0;
        /* height: 55px; */
        border: 1px solid snow;
    }
    
    .navigation-panel a {
        text-decoration: none;
        color: red;
        float: left;
        padding: 14px;
    }
    
    .navigation-panel a:hover {
        color: snow;
        background-color: brown;
        /* transition: 0.5s; */
        /* border: 1px solid snow; */
    }
    
    #content-body {
        height: 1000px;
        background-color: gold;
    }

 <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>Sample Codings</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
        <!-- <script src='main.js'></script> -->
    </head>
    
    <body>
        <div id="homepage">
            <div class="header">
                <h1>Sample Codings</h1>
            </div>
    
            <div class="navigation-panel">
    
                <a href="">Home</a>
                <a href="">checking</a>
                <a href="">Java</a>
                <a href="">Spring</a>
                <a href="">ThreeJs</a>
    
            </div>
            <div id="content-body"></div>
        </div>
    </body>
    
    </html>

score 1 · Answer 2 · edited May 27 '20 at 14:35

You will want to use position:fixed instead of position:sticky. When you do this, you'll want to make sure that you add a margin to the navigation so that it allows room for the header. This margin should be the same height as the header element. For good measure, add position:relative to the #homepage element, as well.

Alternatively, you can move the header outside of the #homepage element, and make the #homepage element position relative. Then you can remove the fixed height and margin, and the top:0 from the navigation element. This may cause some issues in older browsers, though.

    
    #homepage{
        position:relative;
    }
    .header {
        text-align: center;
        
        color: snow;
        padding: 1px;
        width: auto;
       
        background-color: red;
        
        height: 105px;
    }
    
    .navigation-panel {
        display: block;
        background-color: snow;
        position: fixed;
        
        top: 0;
        
        border: 1px solid snow;
        margin-top:105px;
    }

Add HTML part to your snippet. I am not able to see the output. — Vaibhav, May 27 '20 at 03:01

Css Sticky position not working after apply top:0;

2 Answers2