How To Make Dawn Sticky Header Permanent

Click here to view our example store

Quick and easy guide below, currently the Dawn theme has the sticky header option, but only reveals itself when you scroll up. So this guide will teach you how to make the sticky header function permanent.

Go to edit code, head over to the Section folder and find header.liquid. Once found, scroll down until you find the below code. It’s essentially everything between the {% javascript %} {% endjavascript %} tags, before the {% schema %} tag. Delete it from the header.liquid.

{% javascript %}
  class StickyHeader extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      this.header = document.getElementById('shopify-section-header');
      this.headerBounds = {};
      this.currentScrollTop = 0;
      this.preventReveal = false;
      this.predictiveSearch = this.querySelector('predictive-search');

      this.onScrollHandler = this.onScroll.bind(this);
      this.hideHeaderOnScrollUp = () => this.preventReveal = true;

      this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.addEventListener('scroll', this.onScrollHandler, false);

      this.createObserver();
    }

    disconnectedCallback() {
      this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
      window.removeEventListener('scroll', this.onScrollHandler);
    }

    createObserver() {
      let observer = new IntersectionObserver((entries, observer) => {
        this.headerBounds = entries[0].intersectionRect;
        observer.disconnect();
      });

      observer.observe(this.header);
    }

    onScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (this.predictiveSearch && this.predictiveSearch.isOpen) return;

      if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        requestAnimationFrame(this.hide.bind(this));
      } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
        if (!this.preventReveal) {
          requestAnimationFrame(this.reveal.bind(this));
        } else {
          window.clearTimeout(this.isScrolling);

          this.isScrolling = setTimeout(() => {
            this.preventReveal = false;
          }, 66);

          requestAnimationFrame(this.hide.bind(this));
        }
      } else if (scrollTop <= this.headerBounds.top) {
        requestAnimationFrame(this.reset.bind(this));
      }


      this.currentScrollTop = scrollTop;
    }

    hide() {
      this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
      this.closeMenuDisclosure();
      this.closeSearchModal();
    }

    reveal() {
      this.header.classList.add('shopify-section-header-sticky', 'animate');
      this.header.classList.remove('shopify-section-header-hidden');
    }

    reset() {
      this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
    }

    closeMenuDisclosure() {
      this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure');
      this.disclosures.forEach(disclosure => disclosure.close());
    }

    closeSearchModal() {
      this.searchModal = this.searchModal || this.header.querySelector('details-modal');
      this.searchModal.close(false);
    }
  }

  customElements.define('sticky-header', StickyHeader);
{% endjavascript %}

Go to the Asset Folder and find Global.js, go to the very bottom of Global.js, copy the below code and paste it.

class StickyHeader extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.header = document.getElementById('shopify-section-header');
    this.header.classList.add('shopify-section-header-sticky');
    this.headerBounds = {};
    this.currentScrollTop = 0;
    this.preventReveal = false;
    this.predictiveSearch = this.querySelector('predictive-search');

    this.onScrollHandler = this.onScroll.bind(this);
    this.hideHeaderOnScrollUp = () => this.preventReveal = true;

    this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
    window.addEventListener('scroll', this.onScrollHandler, false);

    this.createObserver();
  }

  disconnectedCallback() {
    this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
    window.removeEventListener('scroll', this.onScrollHandler);
  }

  createObserver() {
    let observer = new IntersectionObserver((entries, observer) => {
      this.headerBounds = entries[0].intersectionRect;
      observer.disconnect();
    });

    observer.observe(this.header);
  }

  onScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
    /*
    if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
      requestAnimationFrame(this.hide.bind(this));
    } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
      if (!this.preventReveal) {
        requestAnimationFrame(this.reveal.bind(this));
      } else {
        window.clearTimeout(this.isScrolling);

        this.isScrolling = setTimeout(() => {
                                      this.preventReveal = false;
                                      }, 66);

        requestAnimationFrame(this.hide.bind(this));
      }
    } else if (scrollTop <= this.headerBounds.top) {
      requestAnimationFrame(this.reset.bind(this));
    }
    */


    this.currentScrollTop = scrollTop;
  }

  /*
  hide() {
    this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
    this.closeMenuDisclosure();
    this.closeSearchModal();
  }

  reveal() {
    this.header.classList.add('shopify-section-header-sticky', 'animate');
    this.header.classList.remove('shopify-section-header-hidden');
  }

  reset() {
    this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
  }
  */

  closeMenuDisclosure() {
    this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure');
    this.disclosures.forEach(disclosure => disclosure.close());
  }

  closeSearchModal() {
    this.searchModal = this.searchModal || this.header.querySelector('details-modal');
    this.searchModal.close(false);
  }
}

 customElements.define('sticky-header', StickyHeader);

And you are done, you now have a permanent sticky header without the nasty animation on the Dawn theme!

Written by

Jotter are a group of freelancing Shopify & Shopify Plus Experts. Dedicated to offering design, development, marketing and seo services to grow your Shopify business.

Comments:

  • Pijus

    Hey, I’ve completed this guide, but nothing seemed to happen. Perhaps you know what could be the reason?
    My website is http://www.limitdesign.lt
    psw: codecode

  • Pijus

    Thank you!

    • John From Jotting

      Hi Pijus,

      Seems like the header.liquid wasn’t playing ball with the updates I had. It was remembering the old code somehow, even though we deleted it. Solution is to delete everything between the {% javascript %} tags and the tags itself. Then recopy the whole thing into the Global.js file. This will sort out the issue. You can refollow the guide and copy the solution into the global.js. Just remember to delete it from the header.liquid.

      I’ve tested the above in a freshly installed Dawn Theme and it works. So should be all good.

  • Pijus

    Thank you very much, thanks to Jotting Team header works like a charm!

  • CS-MKD

    Hi, I have made this tutorial and the transparent header ones. Both work great! Thanks. But in your example, the sticky header goes white and changes font colours, something I would like to have and is not working for me. Am I missing something? Thanks a lot

    • John From Jotting

      Hi Catalina,

      The colour of links when it’s white background reverts to the original colour. So whichever you set text/links colour as in color settings, is the colour it’s going to be.

Post a comment:

Comment

Type at least 1 character to search

Subscribe:

No Bull, No Fluff. Don't get sold on fake hope! Learn how to grow your business long term. Subscribe now for FREE tips on the latest strategies, techniques and best practices.

Contact Us:

Sydney, NSW, 2000
Australia
john@jotting.com

Bluish.io has rebranded to Jotting.com :) x