Skip to content

Instantly share code, notes, and snippets.

@jadark
Forked from javierarques/sticky.js
Created September 19, 2018 20:59
Show Gist options
  • Save jadark/7e201feb4b78f77f33d5c1d34fd7aad7 to your computer and use it in GitHub Desktop.
Save jadark/7e201feb4b78f77f33d5c1d34fd7aad7 to your computer and use it in GitHub Desktop.
Sticky Sideabr With Vanilla Javascript. Detects scroll and set fixed the element. Live example: http://codepen.io/javiarques/pen/vKdgjR
// Sticky Nav Component
var Sticky = (function() {
'use strict';
var CSS_CLASS_ACTIVE = 'is-fixed';
var Sticky = {
element: null,
position: 0,
addEvents: function() {
window.addEventListener('scroll', this.onScroll.bind(this));
},
init: function(element) {
this.element = element;
this.addEvents();
this.position = element.offsetTop ;
this.onScroll();
},
aboveScroll: function() {
return this.position < window.scrollY;
},
onScroll: function(event) {
if (this.aboveScroll()) {
this.setFixed();
} else {
this.setStatic();
}
},
setFixed: function() {
this.element.classList.add(CSS_CLASS_ACTIVE);
// not needed if added with CSS Class
this.element.style.position = 'fixed';
this.element.style.top = 0;
},
setStatic: function() {
this.element.classList.remove(CSS_CLASS_ACTIVE);
// not needed if added with CSS Class
this.element.style.position = 'static';
this.element.style.top = 'auto';
}
};
return Sticky;
})();
// Init Sticky
var sticky = document.querySelector('.sticky');
if (sticky)
Sticky.init(sticky);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment