Sticky Header Script

You can now turn your website's menu into a floating sticky header with just one click. Your visitors don't have to scro

Copy source code

(function() {
setTimeout(function() {
var menuBarElements = getMenuBarElements();

if (menuBarElements) {
for(var menuBarElement of menuBarElements) {
menuBarElement.classList.add("data-sticky");

let parent = menuBarElement.parentNode;
parent.classList.add("data-sticky-container");
}

// var menu = document.getElementById('genesis-nav-primary');
// menu.classList.add("data-sticky");

// var parent = menu.parentNode;
// parent.classList.add("data-sticky-container");

// var mobileMenu = document.getElementById('mobile-genesis-nav-primary');
// mobileMenu.classList.add("data-sticky");

// var MobileParent = mobileMenu.parentNode;
// MobileParent.classList.add("data-sticky-container");

var sticky = new Sticky(".data-sticky");
}
}, 1000);
})();

function getMenuBarElements() {
var twikSelectorElements = [];

if (twik_tags != null) {
for (var twik_tag of twik_tags) {
if (document.querySelector(twik_tag.selector) && twik_tag.value) {
twikSelectorElements.push(document.querySelector(twik_tag.selector));
}
}
}

return twikSelectorElements;
}

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

/**
* Sticky.js
* Library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.
*
* @version 1.2.0
* @author Rafal Galus <biuro@rafalgalus.pl>
* @website https://rgalus.github.io/sticky-js/
* @repo https://github.com/rgalus/sticky-js
* @license https://github.com/rgalus/sticky-js/blob/master/LICENSE
*/

var Sticky = (function() {
/**
* Sticky instance constructor
* @constructor
* @param {string} selector - Selector which we can find elements
* @param {string} options - Global options for sticky elements (could be overwritten by data-{option}="" attributes)
*/
function Sticky() {
var selector =
arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
var options =
arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

_classCallCheck(this, Sticky);

this.selector = selector;
this.elements = [];

this.version = "1.2.0";

this.vp = this.getViewportSize();
this.body = document.querySelector("body");

this.options = {
wrap: options.wrap || false,
marginTop: options.marginTop || 0,
stickyFor: options.stickyFor || 0,
stickyClass: options.stickyClass || null,
stickyContainer: options.stickyContainer || "body"
};

this.updateScrollTopPosition = this.updateScrollTopPosition.bind(this);

this.updateScrollTopPosition();
window.addEventListener("load", this.updateScrollTopPosition);
window.addEventListener("scroll", this.updateScrollTopPosition);

this.run();
}

/**
* Function that waits for page to be fully loaded and then renders & activates every sticky element found with specified selector
* @function
*/

Sticky.prototype.run = function run() {
var _this = this;

// wait for page to be fully loaded
var pageLoaded = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(pageLoaded);

var elements = document.querySelectorAll(_this.selector);
_this.forEach(elements, function(element) {
return _this.renderElement(element);
});
}
}, 10);
};

/**
* Function that assign needed variables for sticky element, that are used in future for calculations and other
* @function
* @param {node} element - Element to be rendered
*/

Sticky.prototype.renderElement = function renderElement(element) {
var _this2 = this;

// create container for variables needed in future
element.sticky = {};

// set default variables
element.sticky.active = false;

element.sticky.marginTop =
parseInt(element.getAttribute("data-margin-top")) ||
this.options.marginTop;
element.sticky.stickyFor =
parseInt(element.getAttribute("data-sticky-for")) ||
this.options.stickyFor;
element.sticky.stickyClass =
element.getAttribute("data-sticky-class") || this.options.stickyClass;
element.sticky.wrap = element.hasAttribute("data-sticky-wrap")
? true
: this.options.wrap;
// @todo attribute for stickyContainer
// element.sticky.stickyContainer = element.getAttribute('data-sticky-container') || this.options.stickyContainer;
element.sticky.stickyContainer = this.options.stickyContainer;

element.sticky.container = this.getStickyContainer(element);
element.sticky.container.rect = this.getRectangle(element.sticky.container);

element.sticky.rect = this.getRectangle(element);

// fix when element is image that has not yet loaded and width, height = 0
if (element.tagName.toLowerCase() === "img") {
element.onload = function() {
return (element.sticky.rect = _this2.getRectangle(element));
};
}

if (element.sticky.wrap) {
this.wrapElement(element);
}

// activate rendered element
this.activate(element);
};

/**
* Wraps element into placeholder element
* @function
* @param {node} element - Element to be wrapped
*/

Sticky.prototype.wrapElement = function wrapElement(element) {
element.insertAdjacentHTML("beforebegin", "<span></span>");
element.previousSibling.appendChild(element);
};

/**
* Function that activates element when specified conditions are met and then initalise events
* @function
* @param {node} element - Element to be activated
*/

Sticky.prototype.activate = function activate(element) {
if (
element.sticky.rect.top + element.sticky.rect.height <
element.sticky.container.rect.top +
element.sticky.container.rect.height &&
element.sticky.stickyFor < this.vp.width &&
!element.sticky.active
) {
element.sticky.active = true;
}

if (this.elements.indexOf(element) < 0) {
this.elements.push(element);
}

if (!element.sticky.resizeEvent) {
this.initResizeEvents(element);
element.sticky.resizeEvent = true;
}

if (!element.sticky.scrollEvent) {
this.initScrollEvents(element);
element.sticky.scrollEvent = true;
}

this.setPosition(element);
};

/**
* Function which is adding onResizeEvents to window listener and assigns function to element as resizeListener
* @function
* @param {node} element - Element for which resize events are initialised
*/

Sticky.prototype.initResizeEvents = function initResizeEvents(element) {
var _this3 = this;

element.sticky.resizeListener = function() {
return _this3.onResizeEvents(element);
};
window.addEventListener("resize", element.sticky.resizeListener);
};

/**
* Removes element listener from resize event
* @function
* @param {node} element - Element from which listener is deleted
*/

Sticky.prototype.destroyResizeEvents = function destroyResizeEvents(element) {
window.removeEventListener("resize", element.sticky.resizeListener);
};

/**
* Function which is fired when user resize window. It checks if element should be activated or deactivated and then run setPosition function
* @function
* @param {node} element - Element for which event function is fired
*/

Sticky.prototype.onResizeEvents = function onResizeEvents(element) {
this.vp = this.getViewportSize();

element.sticky.rect = this.getRectangle(element);
element.sticky.container.rect = this.getRectangle(element.sticky.container);

if (
element.sticky.rect.top + element.sticky.rect.height <
element.sticky.container.rect.top +
element.sticky.container.rect.height &&
element.sticky.stickyFor < this.vp.width &&
!element.sticky.active
) {
element.sticky.active = true;
} else if (
element.sticky.rect.top + element.sticky.rect.height >=
element.sticky.container.rect.top +
element.sticky.container.rect.height ||
(element.sticky.stickyFor >= this.vp.width && element.sticky.active)
) {
element.sticky.active = false;
}

this.setPosition(element);
};

/**
* Function which is adding onScrollEvents to window listener and assigns function to element as scrollListener
* @function
* @param {node} element - Element for which scroll events are initialised
*/

Sticky.prototype.initScrollEvents = function initScrollEvents(element) {
var _this4 = this;

element.sticky.scrollListener = function() {
return _this4.onScrollEvents(element);
};
window.addEventListener("scroll", element.sticky.scrollListener);
};

/**
* Removes element listener from scroll event
* @function
* @param {node} element - Element from which listener is deleted
*/

Sticky.prototype.destroyScrollEvents = function destroyScrollEvents(element) {
window.removeEventListener("scroll", element.sticky.scrollListener);
};

/**
* Function which is fired when user scroll window. If element is active, function is invoking setPosition function
* @function
* @param {node} element - Element for which event function is fired
*/

Sticky.prototype.onScrollEvents = function onScrollEvents(element) {
if (element.sticky.active) {
this.setPosition(element);
}
};

/**
* Main function for the library. Here are some condition calculations and css appending for sticky element when user scroll window
* @function
* @param {node} element - Element that will be positioned if it's active
*/

Sticky.prototype.setPosition = function setPosition(element) {
this.css(element, {
position: "",
width: "",
top: "",
left: "",
"margin-top": ""
});

if (this.vp.height < element.sticky.rect.height || !element.sticky.active) {
if (!element.sticky.active) {
return;
}
}

if (!element.sticky.rect.width) {
element.sticky.rect = this.getRectangle(element);
}

if (element.sticky.wrap) {
this.css(element.parentNode, {
display: "block",
width: element.sticky.rect.width + "px",
height: element.sticky.rect.height + "px",
"margin-top": "0"
});
}

if (
element.sticky.rect.top === 0 &&
element.sticky.container === this.body
) {
this.css(element, {
position: "fixed",
top: element.sticky.rect.top + "px",
left: element.sticky.rect.left + "px",
width: element.sticky.rect.width + "px",
"margin-top": "0"
});
} else if (
this.scrollTop >
element.sticky.rect.top - element.sticky.marginTop
) {
this.css(element, {
position: "fixed",
width: element.sticky.rect.width + "px",
left: element.sticky.rect.left + "px",
"margin-top": "0"
});

if (
this.scrollTop + element.sticky.rect.height + element.sticky.marginTop >
element.sticky.container.rect.top +
element.sticky.container.offsetHeight
) {
if (element.sticky.stickyClass) {
element.classList.remove(element.sticky.stickyClass);
}

this.css(element, {
top:
element.sticky.container.rect.top +
element.sticky.container.offsetHeight -
(this.scrollTop + element.sticky.rect.height) +
"px"
});
} else {
if (element.sticky.stickyClass) {
element.classList.add(element.sticky.stickyClass);
}

this.css(element, { top: element.sticky.marginTop + "px" });
}
} else {
if (element.sticky.stickyClass) {
element.classList.remove(element.sticky.stickyClass);
}

this.css(element, {
position: "",
width: "",
top: "",
left: "",
"margin-top": ""
});

if (element.sticky.wrap) {
this.css(element.parentNode, { display: "", width: "", height: "" });
}
}
};

/**
* Function that updates element sticky rectangle (with sticky container), then activate or deactivate element, then update position if it's active
* @function
*/

Sticky.prototype.update = function update() {
var _this5 = this;

this.forEach(this.elements, function(element) {
element.sticky.rect = _this5.getRectangle(element);
element.sticky.container.rect = _this5.getRectangle(
element.sticky.container
);

_this5.activate(element);
_this5.setPosition(element);
});
};

/**
* Destroys sticky element, remove listeners
* @function
*/

Sticky.prototype.destroy = function destroy() {
var _this6 = this;

this.forEach(this.elements, function(element) {
_this6.destroyResizeEvents(element);
_this6.destroyScrollEvents(element);
delete element.sticky;
});
};

/**
* Function that returns container element in which sticky element is stuck (if is not specified, then it's stuck to body)
* @function
* @param {node} element - Element which sticky container are looked for
* @return {node} element - Sticky container
*/

Sticky.prototype.getStickyContainer = function getStickyContainer(element) {
var container = element.parentNode;

while (
!container.hasAttribute("data-sticky-container") &&
!container.parentNode.querySelector(element.sticky.stickyContainer) &&
container !== this.body
) {
container = container.parentNode;
}

return container;
};

/**
* Function that returns element rectangle & position (width, height, top, left)
* @function
* @param {node} element - Element which position & rectangle are returned
* @return {object}
*/

Sticky.prototype.getRectangle = function getRectangle(element) {
this.css(element, { position: "", width: "", top: "", left: "" });

var width = Math.max(
element.offsetWidth,
element.clientWidth,
element.scrollWidth
);
var height = Math.max(
element.offsetHeight,
element.clientHeight,
element.scrollHeight
);

var top = 0;
var left = 0;

do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);

return { top: top, left: left, width: width, height: height };
};

/**
* Function that returns viewport dimensions
* @function
* @return {object}
*/

Sticky.prototype.getViewportSize = function getViewportSize() {
return {
width: Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
),
height: Math.max(
document.documentElement.clientHeight,
window.innerHeight || 0
)
};
};

/**
* Function that updates window scroll position
* @function
* @return {number}
*/

Sticky.prototype.updateScrollTopPosition = function updateScrollTopPosition() {
this.scrollTop =
(window.pageYOffset || document.scrollTop) - (document.clientTop || 0) ||
0;
};

/**
* Helper function for loops
* @helper
* @param {array}
* @param {function} callback - Callback function (no need for explanation)
*/

Sticky.prototype.forEach = function forEach(array, callback) {
for (var i = 0, len = array.length; i < len; i++) {
callback(array[i]);
}
};

/**
* Helper function to add/remove css properties for specified element.
* @helper
* @param {node} element - DOM element
* @param {object} properties - CSS properties that will be added/removed from specified element
*/

Sticky.prototype.css = function css(element, properties) {
for (var property in properties) {
if (properties.hasOwnProperty(property)) {
element.style[property] = properties[property];
}
}
};

return Sticky;
})();

/**
* Export function that supports AMD, CommonJS and Plain Browser.
*/

Overview

Sticky header or ""fixed navigation menu"" remains visible and in the same position when user scrolls down. Sticky navigation became very important in the recent years as more webistes add infinite scroll to their pages. Sticky navigation provides additional support for users with lower confidance level. Even if your website does not have a hard coded sticky header, you can now turn your website’s menu into a floating sticky header with just one click. Your visitors don’t have to scroll back to the top of your page to navigate around your website. Simply choose your menu, and append this script to make it work. It can also run site-wide.