Utilizing a bootstrap class, I have created a sticky top header.
header.js
<header className="header sticky-top">HEADER</header>
stylesheet
header {
overflow: hidden;
padding: 20px 10px;
display: inline-flex;
width: 100%;
height: fit-content;
background-color: blue;
}
body {
margin: 0;
height: 100vh;
overflow:auto;
scroll-behavior: smooth;
}
This is my desired layout:
______________________
|_______header_______|
| |*|
| Container Div |*|
| |*|
| |*|
| |*|
| |*|
| |*|
----------------------
* = scrollbar
Feel free to check out the example project on the following demo code sandbox