I have a block located and fixed to the right of the page but there is a problem. When it reaches the footer I need it to stop there, otherwise, on some sizes, it will climb into the footer, which should not happen.
It is important that the page height can be different, maybe 3500px, maybe 4500px.
Is it possible in the script to somehow make this block stop, say, 300px from the end of the page, that is, from the footer?
const navShareLink = document.getElementById('navShareLink');
document.addEventListener('scroll', function(e) {
if (window.scrollY > 1000 && window.innerWidth > 576) {
navShareLink.style.display = "block";
} else {
navShareLink.style.display = "none";
}
});.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: 216px;
width: 48px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 24px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="sidemenu-shares">
<div id="navShareLink" class="rectangle" style="display: none">
</div>
</div>Put the sidebar block in an element which encloses the main page content, with the footer outside of that element. Then use sticky positioning.
/* The important part: */
.sidebar {
float: right;
position: sticky;
top: 8px; /* This should match the top margin/padding on the body */
}
/* Cosmetics for the demo: */
.main-content {
min-height: 200vh;
}
.main-content p:first-of-type {
margin-top: 0;
}
.sidebar {
width: 25vw;
min-height: 25vh;
background-color: #a00;
}
footer {
min-height: 100vh;
background-color: #eee;
}
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 8px;
}<div class="main-content">
<div class="sidebar">
Sidebar...
</div>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
<p>Main content...</p>
</div>
<footer>
Footer...
</footer>