Currently, I am utilizing Bootstrap for my website layout and facing an issue with making the sidebar fixed on scroll after it reaches a certain point in the viewport. The scrolling functionality works fine initially, but when it reaches the bottom, the sidebar starts overlapping the footer section. Despite trying multiple solutions from various sources, I have not been able to resolve this problem.
The objective is to stop the sidebar at the end of its main parent container without overlapping the footer section.
To see the issue in action, you can visit the following Codepen link: https://codepen.io/zakero/pen/yLgBGqq
Below is the code snippet:
// FIXED SCROLL
const main = $("#main");
const aside = $('#aside-content');
const asideInner = $('#aside-content .aside-content');
const sticky = main.offset().top;
$(window).scroll(() => {
if ($(window).scrollTop() >= sticky) {
$(aside).addClass("aside-fixed")
} else {
$(aside).removeClass("aside-fixed");
}
});
// PREVENT OVERLAP ISSUE
// const topOfFooter = $('.footer-bs').position().top;
// const scrollDistanceFromTopOfWin = $(window).scrollTop() + // $(tableOfContentsInner).height();
// const scrollDistanceFromTopOfFooter = scrollDistanceFromTopOfWin - topOfFooter;
// if (scrollDistanceFromTopOfWin > topOfFooter) {
// $(tableOfContents).css('margin-top', 0 - scrollDistanceFromTopOfFooter - 48);
// } else {
// $(tableOfContents).css('margin-top', 0);
// }
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
.main-content {
background-color: cyan;
height: 2000px;
margin: 20px 0;
}
.aside-content {
background-color: red;
height: 400px;
margin: 20px 0;
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 400px;
}