How to make element sticky to bottom of window vh but continue to scroll with rest of page when scrolling past its container?

Question

I have a "learn more" button with an arrow that encourages users to scroll down to the next section of a page, and I want it to always appear at the bottom of the window on page load, so that if someone's window is smaller than the first section they can still see it, but then after scrolling I want it to stop scrolling once the bottom of the first section is on-screen.

So for example

Before Scroll:

  



     Learn More v
---- bottom of VH ----



---- bottom of section one, off-screen ----

after scroll

      Learn More v
---- bottom of section one ----




---- bottom of section two ----

I was trying to figure it out with position: fixed but that obviously keeps it fixed all the way to the bottom of the page. I was trying to fix it to the container but that doesn't work.

Is there a solution to this without javascript? Or will I need to use javascript to limit the farthest it goes down?

I had tried:

#section-one {
   position: relative;
  
  .learn-more {
    position: fixed;
    bottom: 0;

  }

}

Or alternatively maybe

.learn-more {
    position: absolute;
    bottom: 0vh;
}

My thought there was that using vh for positioning might do it when it's absolutely positioned to section-one but that's not a valid option for bottom positioning.

What's the right way to do it?

#section-one {
    position: relative;
    background: #c3c3c3;
    padding: 40px;
    height: 120vh;
    text-align: center;
    
  .learn-more {
    display: flex;
    flex-direction: column;
    border: none;
    width: 100%;
    transition: all .4s;
    position: absolute;
    bottom: 0;
    text-align: center;

    &:hover {
      color: var(--blue);
      transition: all .4s;
      transform: translateY(-10px);
    }

    .caret {
      transform: scale(2,1);
      margin-top: -10px;
    }
  }
 }
 
 #section-two {
  height: 100vh;
  padding: 40px;
  background: #d3d3d3;
 }

<section id="section-one">
  <h1>Section One</h1>
  <ul>
  <li>"Learn More" below should be visible any time section one is on screen.</li>
  <li>Could be in the middle of the section if the bottom of s1 is off-screen</li>
  <li>or if the bottom is on-screen then it should stop at the bottom of the section.</li>
  </ul>
  <a href="#section-two" class="learn-more">
        <div class="font-bold text-lg">Learn More</div>
        <div class="caret font-bold text-xl">⌄</div>
      </a>

</section>

<section id="section-two">
  <h2>Section Two</h2>
  <p>"Learn More" should never be in this section, and should scroll up with the bottom of section 1 above</p>
</section>

Answer 1

You may use position:sticky and remove position:relative from section.

Possible fix: snippet not usable anymore to demonstrate render , you can play with this codepen https://codepen.io/gc-nomade/pen/QwbaeKj

html {
  scroll-behavior:smooth;
}
section {
  min-height:100vh;
  box-sizing:border-box;
}
#section-one {
background: #c3c3c3;
padding: 40px;
height: 120vh;
text-align: center;

  .learn-more {
display: flex;
flex-direction: column;
border: none;
transition: all .4s;
position: sticky;
top:100vh;
translate: 0 -200%;
text-align: center;

&:hover {
  color: var(--blue);
  transition: all .4s;
  transform: translateY(-10px);
}

.caret {
  transform: scale(2,1);
  width:50%;
  margin:auto;
  margin-top: -10px;
}
  }
 }
 
 #section-two {
  padding: 40px;
  background: #d3d3d3;
 }

<section id="section-one">
  <h1>Section One</h1>
  <ul>
  <li>"Learn More" below should be visible any time section one is on screen.</li>
  <li>Could be in the middle of the section if the bottom of s1 is off-screen</li>
  <li>or if the bottom is on-screen then it should stop at the bottom of the section.</li>
  </ul>
  <a href="#section-two" class="learn-more">
        <div class="font-bold text-lg">Learn More</div>
        <div class="caret font-bold text-xl">⌄</div>
      </a>

</section>

<section id="section-two">
  <h2>Section Two</h2>
  <p>"Learn More" should never be in this section, and should scroll up with the bottom of section 1 above</p>
</section>