I have a page, I minimized it a little and now it is something like this
.article-wrapper {
min-height: 200vh;
}
.article-wrapper p:first-of-type {
margin-top: 0;
}
footer {
min-height: 100vh;
background-color: #eee;
}
.sidemenu-shares {
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: center;
position: fixed;
top: 0;
right: 0;
flex-wrap: nowrap;
gap: 40px;
}
.rectangle {
z-index: 998;
transition: opacity 0.5s;
padding: 5px;
height: 106px;
width: 23px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 24px;
}<div class="article-wrapper">
<div class="sidemenu-shares">
<div class="rectangle">
</div>
</div>
<div class="main-banner">
<h1>Title</h1>
</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
<div>Main content...</div>
</div>
<footer>
Footer...
</footer>I have a sidemenu-shares block that should be on top of everything and move, but at the same time not crossing the footer, now as you can see it does this
To make it stop near the footer, I tried to give the .sidemenu-shares class this position: sticky;
It seems to work as it should, the block stops near the footer, but the block itself already changes its position to the center of the page and, as for me, it is not fixed over the entire page. Since I tried to do the same on my main page, where there is a lot of content, and there this block just became at the beginning of the page and did not even move
Is there a way to fix this?
Or there are other options besides using position: sticky;?