I've been working on a project (HTML and CSS page) that features a navbar at the top of the page, a main container below the navbar, and a menu on the left side.
The menu is initially hidden, but when I move my mouse to the left edge of the window, it appears and overlaps the main container.
As I scroll down the page, the navbar scrolls along with it, while the menu moves up until it reaches the top and then remains in place.
I've managed to achieve this functionality to some extent, but I am encountering an issue.
To demonstrate my project simply, I used some basic code from css-tricks.com and made some modifications to highlight the problem.
Below is the modified code snippet:
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
@media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>In this code snippet, the 'extra' div represents the navbar, the grey area signifies the main container, and the sticky element is the menu.
My goal is for the main container (grey area) to utilize the full width and height, displaying text in the top-left corner while being partially overlapped by the sticky menu.
How can I accomplish this design?