@codingheads/sticky-header/dist/umd/index.js

A library that allows you to create sticky headers. It uses `position: sticky` and IntersectionObserver

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.stickyHeader=e():t.stickyHeader=e()}(this,(function(){return(()=>{"use strict";var t={d:(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function n(t){return function(t){if(Array.isArray(t))return i(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){return function(t,e){return e.get?e.get.call(t):e.value}(t,l(t,e,"get"))}function r(t,e,n){if(!e.has(t))throw new TypeError("attempted to get private field on non-instance");return n}function a(t,e,n){return function(t,e,n){if(e.set)e.set.call(t,n);else{if(!e.writable)throw new TypeError("attempted to set read only private field");e.value=n}}(t,l(t,e,"set"),n),n}function l(t,e,n){if(!e.has(t))throw new TypeError("attempted to "+n+" private field on non-instance");return e.get(t)}t.r(e),t.d(e,{StickyHeader:()=>g,default:()=>E});var c=new WeakMap,d=new WeakMap,u=new WeakMap,p=new WeakMap,y=new WeakMap,h=new WeakMap,f=new WeakMap,v=new WeakMap,w=new WeakMap,b=new WeakSet,m=new WeakMap,g=function t(e){var i=this,l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},g=l.pinnedClass,E=void 0===g?"sticky-pinned":g,S=l.unpinnedClass,M=void 0===S?"sticky-unpinned":S,j=l.mainClass,C=void 0===j?"sticky":j,W=l.offset,x=void 0===W?0:W,A=l.positionStickyWorkaround,L=void 0===A||A,T=l.addBodyClasses,H=void 0===T||T;s(this,t),b.add(this),c.set(this,{writable:!0,value:"sticky-pinned"}),d.set(this,{writable:!0,value:"sticky-unpinned"}),u.set(this,{writable:!0,value:"sticky"}),p.set(this,{writable:!0,value:0}),y.set(this,{writable:!0,value:!0}),h.set(this,{writable:!0,value:!1}),f.set(this,{writable:!0,value:null}),v.set(this,{writable:!0,value:null}),w.set(this,{writable:!0,value:!0}),m.set(this,{writable:!0,value:function(t){t.forEach((function(t){t.isIntersecting?window.requestAnimationFrame((function(){[o(i,f)].concat(n(o(i,w)?[document.body]:[])).forEach((function(t){t.classList.add(o(i,d)),t.classList.remove(o(i,c))})),o(i,h)&&o(i,w)&&(document.body.style.paddingTop="0"),o(i,f).dispatchEvent(new CustomEvent("stickyIsUnpinned",{bubbles:!0}))})):window.requestAnimationFrame((function(){[o(i,f)].concat(n(o(i,w)?[document.body]:[])).forEach((function(t){t.classList.remove(o(i,d)),t.classList.add(o(i,c))})),o(i,h)&&o(i,w)&&(document.body.style.paddingTop=o(i,f).clientHeight+"px"),o(i,f).dispatchEvent(new CustomEvent("stickyIsPinned",{bubbles:!0}))}))}))}}),a(this,f,e),a(this,c,E),a(this,d,M),a(this,u,C),a(this,p,x),a(this,y,L),a(this,w,H),a(this,h,document.documentElement.classList.contains("no-csspositionsticky")),r(this,b,k).call(this)};function k(){var t=this,e=o(this,f).parentElement,n=document.createElement("div"),i=window.getComputedStyle(e).getPropertyValue("position");o(this,f).classList.add(o(this,u)),i&&"static"!=i||(e.style.position="relative");var s=window.getComputedStyle(o(this,f),null).getPropertyValue("position");o(this,p)&&"sticky"!=s||a(this,y,!0);var r=o(this,f).clientHeight,l=n;if(n.classList.add("sticky-observer"),n.style.pointerEvents="none",n.style.visibility="hidden",o(this,y)){if(n.style.position="relative",n.style.height="1px",o(this,p)){n.style.height="0";var c=document.createElement("div");c.classList.add("sticky-observer-offset"),c.style.position="absolute",c.style.height="1px",c.style.left="0",c.style.right="0",c.style.top=o(this,p)-r+"px",n.appendChild(c),l=c,["resize","orientationchange"].forEach((function(e){return window.addEventListener(e,(function(){var e;(e=o(t,f).clientHeight)&&(r=e),c.style.top=o(t,p)-r+"px"}))}))}e.insertBefore(n,o(this,f).nextElementSibling)}else n.style.position="absolute",n.style.top="0",n.style.left="0",n.style.right="0",n.style.height=o(this,p)+"px",e.appendChild(n);a(this,v,new IntersectionObserver(o(this,m))),o(this,v).observe(l)}window.StickyHeader=g,"jQuery"in window&&(window.jQuery.fn.stickyHeader=function(t){return this.each((function(e,n){return new g(n,t)})),this});const E=g;return e})()}));