scrolled-header/index.ts

Add active class to fixed header while scrolling down and remove when scrolling up.

interface dataInterface {
  target: HTMLElement,
  offset?: number,
  className?: string,
  backScroll ?: boolean
}

export default class Header {
  target = null;
  offset;
  className;
  scroller = 0;
  toggler = false;
  backScroll = true;

  private toggle() {
    let scroll = document.documentElement.scrollTop;
    if(this.scroller - scroll < this.offset && scroll - this.scroller < this.offset) return false;

    let oldScroller = this.scroller;
    this.scroller = scroll;
    if (oldScroller > this.scroller && this.backScroll) {
      if (this.toggler) {
        this.target.classList.remove(this.className);
        this.toggler = false;
      }
    } else {
      if (this.scroller > this.offset && !this.toggler) {
        this.target.classList.add(this.className);
        this.toggler = true;
      } else if (this.scroller <= this.offset && this.toggler) {
        this.target.classList.remove(this.className);
        this.toggler = false;
      }
    }
  }

  private toggleHandler = () => {
    this.toggle()
  }

  constructor({target, offset = 50, className = "scrolled", backScroll = true}: dataInterface) {
    if (!target) throw new Error("The Header Element is required");
    this.target = target;
    this.offset = offset;
    this.className = className;
    this.scroller = 0;
    this.toggler = false;
    this.backScroll = backScroll

    if (this.target) {
      this.toggle();
      window.addEventListener("scroll", this.toggleHandler);
    }
    return this;
  }

  public stop() {
    window.removeEventListener("scroll", this.toggleHandler);
  }
}