How to use scrollama - 6 common examples

componentDidMount(){
    
    this.scroller = scrollama();

    this.scroller.setup({
        step: '.desc-column-area',
        // debug: true,
        // progress: true,
        offset: (window.innerHeight - 150) / window.innerHeight,
      }).onStepEnter(this.handleStepEnter.bind(this))
        // .onStepProgress(this.handleStepProgress.bind(this))
        // .onStepExit(this.handleStepExit.bind(this));
  }

function scrollamaInit() {
  // instantiate the scrollama
  const scroller = scrollama();

  // setup the instance, pass callback functions
  scroller
    .setup({
      step: ".js-data-waypoint",
    })
    .onStepEnter((response) => {
      document
        .querySelectorAll("[data-waypoint-element]")
        .forEach((stepItem) => {
          stepItem.classList.add("hidden");
        });
    });
}

componentDidMount(){
    let { screenHeight } = this.props;
    
    this.scroller = scrollama();
    this.footerScroller = scrollama();


    this.footerScroller.setup({
      step: '.footer',
      offset: (screenHeight - 80) / screenHeight,
    }).onStepEnter(this.handleFooterEnter.bind(this))
        .onStepExit(this.handleFooterExit.bind(this));


    this.scroller.setup({
        step: '.description-footer',
        // progress: true,
        offset: (screenHeight - 69) / screenHeight 
      }).onStepEnter(this.handleStepEnter.bind(this))
        // .onStepProgress(this.handleStepProgress.bind(this))

initializeScrollma() {
    // instantiate the scrollama
    this.scrollama = scrollama();
    const { slugs = [] } = this.getMetaForCurrentPath();

    // setup the instance, pass callback functions
    this.scrollama
      .setup({
        step: '[id]',
        offset: 0.01,
      })
      .onStepEnter(response => {
        const { element } = response;
        if (slugs.map(ele => ele.heading).includes(element.id)) {
          this.setState({ localActive: element.id });
        }
      });

    // setup resize event

constructor(props){
    super(props);

    this.scroller = scrollama();
    this.state = {
      isMenuOpen: false
    };
  }

constructor(props){
    super(props);
    this.handleResize = this.handleResize.bind(this);
    this.handleScroll = this.handleScroll.bind(this);

    this.headerTopScale = scaleLinear().domain([62, 0]).clamp(true).range([0, -62]);

    this.scroller = scrollama();
    this.handleBodyClick = this.handleBodyClick.bind(this);
  }