Sticky sidebar javascript without jQuery

Question

How do you make a sticky vertical sidebar with stopper, but without jQuery? Are there any snippets/plugins? I don't need it to support older browsers.

I don't mean just position: fixed, it must stay in the same place and then start being sticky (fixed) when you've scrolled past a certain point. It must then stop following at the stop point.

Like http://stickyjs.com , but NOT jQuery. There are many jQuery plugins available.

Answer 1

Basically it's as easy as this:

window.onscroll = function() {
    var sticky = document.getElementById('stickynav');
    if( document.body.scrollTop+document.documentElement.scrollTop > 240)
        sticky.className = "stuck";
    else sticky.className = "";
};

Then just define styles in the .stuck class that add things like position:fixed to the element.

Answer 2

Here's an attempt that doesn't require position: fixed changes, uses the element-document distance as reference and let's you scroll to the bottom:

var node = document.getElementById('side'),  // your element
    nodeOffs = node.offsetTop,               // distance relative to its parent
    parent = node;

// loop through parents to determine the distance relative to the document top
while(parent = parent.offsetParent)
  if(parent.offsetTop)
    nodeOffs += parent.offsetTop;

window.addEventListener('scroll', function(event){    

  // current scroll position relative to the body
  var scrollPos = document.body.scrollTop;

  if(scrollPos > nodeOffs){

    // don't do anything if the elements height is larger than the
    // remaining scroll content height (distance including)
    if(scrollPos < (document.body.scrollHeight - node.clientHeight - nodeOffs))
      node.style.top = (scrollPos - nodeOffs) + 'px';

  }else{
      node.style.top = '0px';
  }

});    

It's likely that this won't handle all possible cases (it doesn't take into account margins for example). That's why there's a plugin that you should use it if you don't want to tweak the js yourself....

(test)

Answer 3

It is possible to do it with shorter JS.

 const stickyDiv = document.querySelector(".sticky"); window.addEventListener("scroll", function() { stickyDiv.style.top = window.pageYOffset + "px"; });

 .left { position: relative; } .sticky { position: absolute; } /* below is unecessary CSS just to demo the page */ .left { width:40%; float:left; } .right { width: 40%; min-height: 3000px; float:right; }

 <div class="container"> <div class="row"> <div class="left"> <article class="sticky"> <h2>Sticky sidebar title here</h2> <p>Text here</p> </article> </div> <div class="right"> <article> <h2>Regular page here</h2> <img src="http://lorempixel.com/400/200/cats"> <p>Regular page content here.</p> </article> </div> </div> </div>

https://codepen.io/MistaPrime/pen/vYYxvza

Answer 4

I know this is an old question and that it is asking for a JavaScript solution BUT, as the main idea here is to get a sticky sidebar working, I have to share that there is a pure CSS solution that works just as expected:

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

Just apply that sticky class to your sidebar elements and that will work.

That will, for sure, save you all a lot of time and effort.

REF: https://developer.mozilla.org/es/docs/Web/CSS/position#sticky