Skip to content

Instantly share code, notes, and snippets.

@fabd
Last active July 25, 2019 11:56
Show Gist options
  • Save fabd/d6b295260efd27470daaa1d478adea56 to your computer and use it in GitHub Desktop.
Save fabd/d6b295260efd27470daaa1d478adea56 to your computer and use it in GitHub Desktop.
Simple "sticky bar" based on scrolling -- without using jQuery ( IE 10+ )
<!-- some page content -->
<!-- buttons, that will stick to top as the user keeps scrolling -->
<div id="JsPreshopSticky">
<button>Sign up</button>
<button>Sign in</button>
</div>
<!-- more page content -->
<!-- another place further down the page where we want to hide the sticky (optional) -->
<div id="JsPreshopStickyHide">
<button>Sign up</button>
<button>Sign in</button>
</div>
<!-- more page content... -->
(function(){
var $$ = function(selector) {
return document.querySelector(selector);
};
$$.on = function(el, event, fn) {
el.addEventListener(event, fn);
};
$$.windowScrollTop = function() {
return window.pageYOffset || window.scrollTop || 0;
};
$$.offsetTop = function(el) {
return this.windowScrollTop() + el.getBoundingClientRect().top;
};
$$.toggleClass = function(el, className, active) {
el.classList[active ? "add" : "remove"](className); // IE10+
};
var STICKY_ACTIVE = 'JsPreshopSticky--active';
var preshopApp = {
onLoad: function() {
// if we're on the right page...
if ($$('#JsPreshopSticky')) {
$$.on(window, 'scroll', this.onScroll.bind(this));
}
},
onScroll: function() {
var currentOffset = $$.windowScrollTop();
// make buttons sticky from this point...
var elTargetOffset = $$('#JsPreshopSticky');
var targetOffset = $$.offsetTop(elTargetOffset) - 5;
$$.toggleClass(elTargetOffset, STICKY_ACTIVE, (currentOffset >= targetOffset));
// un-sticky when the next set of buttons is near...
var elTargetHideOffset = $$('#JsPreshopStickyHide');
var targetHideOffset = $$.offsetTop(elTargetHideOffset) - 50;
if (currentOffset >= targetHideOffset) {
$$.toggleClass(elTargetOffset, STICKY_ACTIVE, false);
}
},
}
$$.on(window, 'load', preshopApp.onLoad());
})();
#JsPreshopSticky {
padding:1em 0 1em;
&.JsPreshopSticky--active {
position:-webkit-sticky;
position:sticky;
top: 0;
z-index: 10;
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.09); // nice drop shadow when the bar is sticky
background:rgba(255,255,255,0.95); // make it semi transparent, while it is sticky
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment