How to change the store logo position when scrolling down? (Dawn theme 7.0+)

Shopify Discussion
1

Hi,

I was trying to change the store logo position from top center to middle left when scrolling down the webpage. And I wanted the logo image to be different when in different position. When the logo is at the top center position, I want to use a square image. When the logo image is at middle left position, I want to change it to another rectangular one. The header area is supposed to be sticky at the top all the time. And idea how to achieve this?

I was looking at the JavaScript code about StickyHeader from header.liquid. But I don’t have a clue how to modify this. Any help and advice is appreciated.

Many thanks,

Elsie

{% 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) {
        if (this.preventHide) return;
        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('header-menu');
      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 %}
2

I tried to imitate the hide effect of the StickHeader(Enable sticky header option). When scroll down, the header is hidden. Header shows on the screen as customers scroll up.

To enable permanent sticky header, you can look at this video:

https://www.youtube.com/watch?v=yT457Zx-fm0&list=PLheDYXfq7DUGjF016vOyNJSZILqo_v4TF&index=19

So, to imitate that effect, I modified the hide() function as below:

(The header–middle-left and header–top-center can be found in base.css)

(But this didn’t work. So I am still figuring out. Just provide an idea here.)

hide() {
      // this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
      this.header.classList.add('shopify-section-header-sticky');
      this.header.classList.remove('header--top-center');
      this.header.classList.add("header--middle-left");
      // this.closeMenuDisclosure();
      this.closeSearchModal();
    }