How to pin and unpin an element using js

Question

So basically I have a side nav on a page I'm working on and I'm trying to pin it on scroll and unpin when it reaches a certain point. Now the purpose of this question isn't to get direct answers only, I'll also like a bit of explanation as to why my code isn't working.

The code is all good when I'm pinning it to the page but I want it to unpin when it reaches the footer section, that's where I'm having a bit of headache.

I tried this:

HTML

<div class="header"></div>
<div class="side-nav"></div>
<div>Rest of page content</div>
<div class="footer"></div>

JS

  function pinElement() {
     var products = document.querySelector('.rest-of-page'),
       scroll = window.scrollY,
       nav = document.querySelector('.side-nav'),
       navTop = nav.offsetTop
       header = document.querySelector('.header'),
       offset = header.clientHeight,
       end = products.clientHeight + products.offsetTop; 


       if (scroll >= navTop) {
            nav.style.position = 'fixed';
            nav.style.top = offset;
        } else if (scroll < navTop) {
            nav.style.position = 'relative';
        } else {
            if(scroll >= end){
               nav.style.position = 'relative';
            }
        }
  }        
       document.addEventListener('scroll', pinElement)

Now the issue I'm having it doesn't unpin when it reaches "end" variable instead it scrolls past it and unpins somewhere near the bottom. I want to understand why this happens and find a proper way of fixing this. Thanks

Answer 1

The problem is not that your conditional isn't reaching if(scroll >= end) since that will be true even if scroll >= navTop .

What should nav.style.top be if it's below end ? Your original conditional always set it to offset .

Set nav.style.top = offset; to the top of end when the user scrolls past end otherwise, you're setting nav.style.top to offset .

if (scroll >= navTop  && !(scroll >= end)) {
        nav.style.position = 'fixed';
        nav.style.top = offset;
    } else if (scroll < navTop) {
        nav.style.position = 'relative';
        //You may wish to set nav.style.top here too since it's ambiguous otherwise
}
if(scroll >= end){
           nav.style.position = 'relative';
           nav.style.top = end.style.top; //or where ever you want it to be
        }
    }

Answer 2

In your if/else statement the last condition never get reached. I have amended your code to make your last condition reachable.

function pinElement() {
     var products = document.querySelector('.rest-of-page'),
       scroll = window.scrollY,
       nav = document.querySelector('.side-nav'),
       navTop = nav.offsetTop
       header = document.querySelector('.header'),
       offset = header.clientHeight,
       end = products.clientHeight + products.offsetTop; 


       if (scroll >= navTop && scroll < end) {
            nav.style.position = 'fixed';
            nav.style.top = offset;
        } else if (scroll < navTop) {
            nav.style.position = 'relative';
        } else {
            if(scroll >= end){
               nav.style.position = 'relative';
            }
        }
  }        
  document.addEventListener('scroll', pinElement)