hexo-theme-keep/source/js/header-shrink.js

/* global KEEP */

KEEP.initHeaderShrink = () => {
  KEEP.utils.headerShrink = {
    headerDom: document.querySelector('.header-wrapper'),
    isHeaderShrink: false,

    init() {
      this.headerHeight = this.headerDom.getBoundingClientRect().height;
    },

    headerShrink() {
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      const headerWrapperDom = document.querySelector('.header-wrapper');
      const { enable, header_transparent } = KEEP.theme_config.style.first_screen;
      if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
        this.isHeaderShrink = true;
        document.body.classList.add('header-shrink');
        if (enable === true && header_transparent === true) {
          headerWrapperDom.classList.add('transparent-2');
        }
      } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
        this.isHeaderShrink = false;
        document.body.classList.remove('header-shrink');
        if (enable === true && header_transparent === true) {
          headerWrapperDom.classList.remove('transparent-2');
        }
      }
    },

    toggleHeaderDrawerShow() {
      const domList = [document.querySelector('.window-mask'), document.querySelector('.menu-bar')];

      if (KEEP.theme_config.pjax.enable === true) {
        domList.push(...document.querySelectorAll('.header-drawer .drawer-menu-list .drawer-menu-item'));
      }

      domList.forEach(v => {
        v.addEventListener('click', () => {
          document.body.classList.toggle('header-drawer-show');
        });
      });
    }
  }
  KEEP.utils.headerShrink.init();
  KEEP.utils.headerShrink.headerShrink();
  KEEP.utils.headerShrink.toggleHeaderDrawerShow();
}