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 , but NOT jQuery. There are many jQuery plugins available.
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., but NOT jQuery. There are many jQuery plugins available.
Share Improve this question edited Jun 16, 2013 at 17:19 Opptatt Jobber asked Jun 16, 2013 at 17:01 Opptatt JobberOpptatt Jobber 3195 silver badges13 bronze badges 04 Answers
Reset to default 7Basically 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.
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)
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./400/200/cats">
<p>Regular page content here.</p>
</article>
</div>
</div>
</div>https://codepen.io/MistaPrime/pen/vYYxvza
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/es/docs/Web/CSS/position#sticky