Disable auto hide for sticky header when scroll to bottom of page-CodePudding

I'm using position: sticky for my header. But it's hidden when I scroll to the half of the page (bottom on mobile). How can I fix it? Any ideas for sticky header with padding-top main content below? Thanks you all.

<body>
    <header>
        <div>My Header</div>
    </header>
    <main>
        <div>My content 1</div>
        <div>My content 2</div>
    </main>
</body>

CSS:

header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: red;
}

CodePudding user response：

I did not see any issue with the code, however you can try with fixed position.

    <html>
        <head>
            <title>Expense Tracker</title>
            <style>
    header{
          position: fixed;
          top: 0;
          width: 100%;
          background-color: red;
    }

    </style>
        </head>
        <body>
        <header>
              <div>My Header</div>
          </header>
          <main>
              <div style="height:1200px;padding-top:20px">My content 1</div>
              <div  style="height:1200px">My content 2</div>
          </main>
    </body>

    </html>

CodePudding user response：

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: red;
}

<body>
    <header>
        <div>My Header</div>
    </header>
    <main>
        <main>
          <div style="height:1200px;padding-top:20px">My content 1</div>
          <div  style="height:1200px">My content 2</div>
      </main>
    </main>
</body>