app.ethica-spinoza.net/assets/modules/ui.js

/**
 * @Author: Bachir Soussi Chiadmi <bach>
 * @Date:   12-09-2017
 * @Email:  bachir@figureslibres.io
 * @Last modified by:   bach
 * @Last modified time: 12-09-2017
 * @License: GPL-V3
 */

// https://plainjs.com

module.exports = {
  init(){
    // console.log('UI init');
    this.initStickyTitles();
  },
  initStickyTitles(){
    //    _____ __  _      __            __  _ __  __
    //   / ___// /_(_)____/ /____  __   / /_(_) /_/ /__
    //   \__ \/ __/ / ___/ //_/ / / /  / __/ / __/ / _ \
    //  ___/ / /_/ / /__/ ,< / /_/ /  / /_/ / /_/ /  __/
    // /____/\__/_/\___/_/|_|\__, /   \__/_/\__/_/\___/
    //                      /____/
    // https://codepen.io/chrissp26/pen/gBrdo?editors=0010

    // let header_height = $('header').height();
    let header_height = document.getElementsByTagName('header')[0].clientHeight;
    // console.log(header_height);

    // create the stkd titles wrapper block
    let stkd_wrapper = document.createElement('div');
    stkd_wrapper.classList.add('sticky-clone-wrapper');
    document.body.append(stkd_wrapper);

    // get all part title
    let part_titles = new Array();
    Array.from(document.querySelectorAll('h1.part-title')).forEach(function(e){
      e._part = e.getAttribute('part');
      part_titles.push(e)
    });
    console.log('part_titles', part_titles);

    var stkd_part,
        last_stkd_part = false,
        subparts,
        stkd_subpart,
        last_stkd_subpart = false,
        clone;

    let OnScroll = function(event){
      // console.log('on scrool', event);
      stkd_part = false;
      for (let i = part_titles.length-1; i >= 0; i--) {
        if(part_titles[i].getBoundingClientRect().top < header_height){
          stkd_part = part_titles[i];
          // console.log("stkd_part");
          break;
        }
      }

      if (stkd_part) {
        // console.log('got stkd_part', stkd_part._part);
        if(stkd_part._part !== last_stkd_part._part){
          console.log('new sticky', stkd_part.innerHTML);
          // clone only once
          clone = stkd_part.cloneNode(true);
          // stkd_wrapper.innerHTML = '';
          // fill stkd_wrapper
          stkd_wrapper.appendChild(clone);
          last_stkd_part = stkd_part;

          // // get all subpart title only once
          // let part_wrapper = stkd_part.parentNode;
          // subparts = new Array();
          // Array.from(part_wrapper.querySelectorAll('h2.title')).forEach(function(e){
          //   subparts.push(e)
          // });
          // // console.log('subparts', subparts);
        }

        // // subtitle
        // stkd_subpart = false;
        // for (let i = subparts.length-1; i >= 0; i--) {
        //   if(subparts[i].getBoundingClientRect().top < header_height + stkd_part.clientHeight){
        //     stkd_subpart = subparts[i];
        //     break;
        //   }
        // }
        //
        // if (stkd_subpart){
        //   if( stkd_subpart.innerHTML !== last_stkd_subpart.innerHTML ){
        //     console.log("new stkd_subpart "+stkd_subpart.innerHTML);
        //     clone = stkd_subpart.cloneNode(true);
        //     // stkd_wrapper.lastChild.remove();
        //     stkd_wrapper.appendChild(clone);
        //     last_stkd_subpart = stkd_subpart;
        //   }
        // }else{
        //   // stkd_wrapper.lastChild.remove();
        //   stkd_subpart = last_stkd_subpart = false;
        // }
      }else{
        // empty stkd_wrapper
        stkd_wrapper.innerHTML = '';
        stkd_part = last_stkd_part = false;
      }
    };

    //
    // $window.on('scroll', OnScroll);
    // console.log('window', window);
    window.onscroll = OnScroll;
  }
}