Stop sticky scroll when at the bottom of div

user_13716367 0
Viewed 3050

I have a sticky sidebar that works just like I want it to as you scroll down the main content (it sticks right where I want it), but when I get to the bottom of the page, for some reason the sidebar unsticks and keeps scrolling up, making the top several items in the sidebar menu disappear behind me fixed header.

I think this is due to the css height property that I have defined for my sticky element, which I have set at 100vh.

How can I set my sticky sidebar so that when I hit the bottom of the page, it doesn't keep scrolling up?

Here is my code for this section, and if it's easier here is a URL to the working version of the site.

Here is my HTML and CSS 

  /* sidebar styling */

aside {
  height: 100vh;
  width: 160px;
  margin-left: -0.5em;
  position: sticky;
  z-index: 0.5;
  top: 4em;
  left: 0;
  background-color: lightblue;
  overflow-x: hidden;
}

aside a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 1.25em;
  color: black;
  display: block;
}

aside a:hover:not(.current-menu-item) {
  background-color: tan;
  font-weight: bold;
}

.current-menu-item {
  background-color: white;
  font-weight: bold;
}


/* main content styling */

.content {
  margin-left: 160px;
  font-size: 28px;
  padding: 0em 0.5em;
}

a.anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;
<section>

  <aside>
    <a class="menu-item-1" href="#target1">About</a>
    <a class="menu-item-2" href="#target2">Services</a>
    <a class="menu-item-3" href="#target3">Clients</a>
    <a class="menu-item-4" href="#target4">Contact</a>
  </aside>

  <div class="content">

    <a class="anchor" id="target1"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target2"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target3"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

    <a class="anchor" id="target4"></a>
    <h2>Title 1</h2>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>
    <h4>Subheading</h4>
    <p>Text</p>

  </div>

</section>

sticky css html
1 Answers

I think this is due to the css height property that I have defined for my sticky element, which I have set at 100vh.

You are right. Once you scroll pass the height of the sticky element, it won't stick to the screen anymore. It is because position sticky still sets an element in the normal flow.

Solution

  1. Set the height of div.content as same as the sticky element
  2. Get rid of the default margin of body

This way, you don't scroll pass the height of the sticky element in the window. Therefore, the problem does not occur.

  1. Right now, div.content has its last element overflowing with the extra padding. So, set overflow: hidden to keep its height same as the sticky element.
  2. body has a default margin. So, set margin: 0 to it.

It will fix most of the things in the right position, but there are still some unnecessary styles defined. So, you can fix the rest of it for your needs. Good luck, and I hope I answered your question.

user_99063250
Related