Sticky navbar disappears on scroll-CodePudding

How can I make the sticky navbar stick to top of the page even after I provide a static height on sections below? Now when I scroll to the point of test-section then the nav disappears. How can I avoid this?

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 50px;
  background: blue;
}

.test-section {
  height: 300px;
  background: red;
}

<div>


<div >
  hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve

</p>
</div>
<div >
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">

</div>

CodePudding user response：

Use "position: fixed" instead on the class header

CodePudding user response：

Changing from position: sticky; to position: fixed; and also adding width: 100%; to your .header class seems to get the result your looking for

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 50px;
  width:100%;
  background: blue;
}

.test-section {
  height: 300px;
  background: red;
}

<div>


<div >
  hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve

</p>
</div>
<div >
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">

</div>

CodePudding user response：

.header {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 50px;
  background: blue;
}