TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    Sticky Header

    This library allows you to create sticky headers. It uses position: sticky and IntersectionObserver.

    The plugin doesn't require jQuery, but it adds itself to jQuery if jQuery exists on the page.


    Use npm (or yarn) to install the package.

    npm install --save @codingheads/sticky-header

    Initializing in JavaScript

    To initialize the library, you need to create a new instance of the StickyHeader class:

    import StickyHeader from '@codingheads/sticky-header';
    const header = document.querySelector('header.page-header');
    new StickyHeader(header, options);

    Or using jQuery:

    import '@codingheads/sticky-header';

    The options object can have the following properties:

    • mainClass - the class added when the plugin is initialized (default: sticky)
    • pinnedClass - the class added when the element becomes "stuck" (default: sticky-pinned)
    • unpinnedClass - the class added when the element becomes "unstuck" (default: sticky-unpinned)
    • offset - the offset (in pixels) where the element should become "stuck" (default: 0)
    • addBodyClasses - add the pinnedClass and unpinnedClass classes to the body element as well (default: true)


    1. The plugin uses position: sticky. This is supported in all modern browsers. However, position: sticky has some requirements: you must not have parent elements with overflow: hidden, or otherwise it will not work (the position will be static). If you cannot get it to start, check that you don't have overflow: hidden on a parent element.

    2. If you change the header size depending on the "stuck"/"unstuck" status, you will probably need to prevent the window from scrolling when this happens (the header will push the content).

    If you have a #wrapper element around the content (including the header), you could do something like this:

    header.sticky {
      top: 0;
      position: sticky;
    /** fix for when the header grows in size when it becomes unpinned and the scroll position changes (we need to scroll more) **/
    @supports (position: sticky) {
      body.sticky-unpinned #wrapper {
        overflow-anchor: none;


    npm i @codingheads/sticky-header

    DownloadsWeekly Downloads






    Unpacked Size

    86.4 kB

    Total Files


    Last publish


    • bogdanbeniaminb
    • chhq