Stop the automatic hiding of the sticky header when reaching the bottom of the page

Question

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? Additionally, I would appreciate any suggestions for creating a sticky header with padding-top for the main content below. Thank you in advance.

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

CSS:

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

html jquery css

Answer 1

Answer №1

After carefully reviewing the code, I couldn't identify any issues with it. However, you could experiment with adding a fixed position to see if that resolves any potential problems.

<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>

Answer 2

After carefully reviewing the code, I couldn't identify any issues with it. However, you could experiment with adding a fixed position to see if that resolves any potential problems.

<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>

Answer 3

Answer №2

The position of an element can be determined by the user's scroll position.

When an element has a sticky position, it changes between relative and fixed depending on how far the user has scrolled. Initially, it is positioned relative to its normal placement in the document flow. However, once the user reaches a certain offset position within the viewport, the element will "stick" in place as if it had a fixed position.

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>

Answer 4

The position of an element can be determined by the user's scroll position.

When an element has a sticky position, it changes between relative and fixed depending on how far the user has scrolled. Initially, it is positioned relative to its normal placement in the document flow. However, once the user reaches a certain offset position within the viewport, the element will "stick" in place as if it had a fixed position.

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>

Stop the automatic hiding of the sticky header when reaching the bottom of the page

Answer №1

Answer №2

Similar questions

Updating the feather icon through JavaScript

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Column-oriented and Slim-fit packaging

Flashing text compatibility across all browsers

Automatic scrolling feature in JavaFX

`Testing the functionality of javascript/jQuery events using Jasmine`

Personalized tooltips for numerous data sets in Highcharts

I'm having trouble getting my .click method to work with the <div id=menuButton>. Can anyone help me figure out why this is happening?

A simple demo showcasing interactive HTML pages using Django and AJAX

The controller remains unresponsive when attempting to activate the button on the webpage

Video with dynamic sizing doesn't adapt properly

what is the process for creating a dynamic display slide in bxslider?

JQuery email validation failing to function

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Using an HTML5 image icon as an input placeholder

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Utilizing CSS3 Animation for enhanced hover effects

Struggling to make AngularJS routes function properly

On mobile devices, a height of 100vh exceeds the visible screen area

Why isn't the Angular function being activated by the HTML generated by the datatable?