On-scroll fixed sidebar overlapping on footer

Question

I'm using Bootstrap for my layout and I have been trying to make my sidebar fixed on scroll after the viewport reaches it. Right now the scrolling part works fine but the issue arises at the bottom.

After I reach the bottom, the sidebar moves over the footer and overlaps it. I have tried at least 4 solutions from SO but nothing seems to work.

So in short what I've been trying to achieve is stop the sidebar at the end of its main parent container and not overlap the footer section.

Here's the codepen to check the issue: https://codepen.io/zakero/pen/yLgBGqq

Here's the 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; }

 <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Test</a> </nav> <section class="container"> <div class="row"> <div class="col-md-12"> <div class="header-content"> <h3>header content</h3> </div> </div> </div> </section> <section class="container" id="main"> <div class="row"> <div class="col-sm-12 col-md-8"> <div class="main-content"> <h3>main content</h3> </div> </div> <div class="col-sm-12 col-md-4" id="aside-content"> <div class="aside-content"> <h3>aside content</h3> </div> </div> </div> </section> <footer> <h3>footer</h3> </footer>

Answer 1

you can do that with pure Css without using JavaScript:

`
.container{
  position:relative;
}
#aside-content{
  position: sticky;
  top: 0;
  align-self: flex-start;
}
`

Answer 2

Add z-index: -1; to .aside-fixed class.

z-index defines the priority in terms of overlap when using elements that have positions other than static (static is the default position). The higher z-index element will cover the lower z-index element.

Your footer has position: static; by default as it is not defined, and a static element has, by default, z-index: auto; which is the same as z-index: 0; . By stating that your aside-fixed element has a z-index: -1; it will have lower priority than the footer therefore the footer will cover it.

When dealing with multiple non-static elements the cleanest way would be to give both (or all relevant) elements a z-index where one of them is higher than the other. This way all relevant elements have a z-index stated which makes it easier to write code, as no "magic" unstated default z-index value will interfere. You can also avoid the use of negative z-indexes that way.

You can read more about z-indexes over on MDN Web Docs: z-index