This is an additional query related to my previous question
How can I make an element sticky but scrollable to its full (variable) height with a sibling element?
The issue at hand is that the right sidebar does scroll to its full available content and then becomes sticky, allowing the user to scroll the main section to view its content, similar to the behavior on Twitter. However, the problem arises when the user scrolls up; the right sidebar does not scroll up until the user reaches the very top of the page. To gain more insights, try increasing the heights of the columns.
What would be the best way to resolve this issue?
Effective Solution
var lastScrollTop = 0;
document.addEventListener("scroll", function() {
var st = window.pageYOffset || document.documentElement.scrollTop;
document.querySelector('.right-sidebar').classList.toggle('scroll_down', st > lastScrollTop);
lastScrollTop = st <= 0 ? 0 : st;
}, false);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
min-height: 100vh;
font-size: 2rem;
}
.inner-grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-sidebar,
.right-sidebar,
.main {
margin: 0 1rem;
}
.left-sidebar,
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
height: 95%;
margin-top: 2.5rem;
}
.left-sidebar {
background-color: burlywood;
height: 100vh;
position: sticky;
top: 0;
}
.main {
background-color: tomato;
height: 3000px;
}
.right-sidebar {
background-color: cadetblue;
position: sticky;
min-height: 100vh;
height: 1000px;
top: 0;
}
.scroll_down {
top: unset;
bottom: 0;
margin-top: auto;
}
.fixed-header {
background-color: black;
color: white;
position: fixed;
width: auto;
top: 0;
}<div class="container">
<div class="left-sidebar">
<div>
<div>left sidebar</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
<div class="inner-grid-container">
<div class="main">
<div class="fixed-header">fixed header</div>
<div class="content">
<div>
<div>main</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
</div>
<div class="right-sidebar">
<div class="fixed-header">fixed header</div>
<div class="" style="margin-top: 2.5rem;">
<div>
<div>right sidebar</div>
<div>top</div>
</div>
<p style="font-size: 1rem;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde iste, repudiandae quasi, cumque mollitia animi, libero dolores aliquam ipsam optio veritatis tempore eius. Nemo magni molestiae quis similique itaque dolorem quisquam, neque odit debitis
earum deleniti ut natus distinctio ipsa repellendus tempore voluptatem cupiditate sunt delectus quo? Pariatur, quis modi natus molestiae quibusdam quod, dolore perferendis deserunt deleniti fugit, fuga voluptas a numquam accusamus quam aliquam?
Ipsa necessitatibus perspiciatis sunt eaque, incidunt vitae, labore autem, quos voluptatibus numquam commodi earum non iusto. Sapiente quis, praesentium maxime odit, eligendi libero illo necessitatibus deserunt nisi, assumenda culpa ducimus
cum debitis dolores sequi?</p>
<img src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="150" height="300" alt="">
<div style="position: absolute; bottom: 0;">bottom</div>
</div>
</div>
</div>
</div>