Cacher is the code snippet organizer for pro developers

import $ from 'jquery';
import debounce from './utils/debounce';
import changeWindowUrl from './utils/change-url';

class Hashing {
    constructor (selector) {
        this.$wysiwygContent  = $(selector);
        this.headingPositions = {};

        this.init();
    }

    scrollToHeading (hash) {
        const $heading = $('#' + hash);

        if ($heading.length) {
            const top = $heading.offset().top;

            window.scrollTo(0, top);
        }
    }

    convertToSlug (Text) {
        return Text
            .toLowerCase()
            .replace(/[^\w -]+/g, '')
            .replace(/ +/g, '-');
    }

    init () {
        // Functions
        const scrollToHeading        = this.scrollToHeading;
        const updateHeadingPositions = this.updateHeadingPositions;
        const self                   = this;

        console.log(this);

        console.log('update=');
        this.updateHeadingPositions();

        /**
         * Window events
         */
        $(window)
            .on('load', function () {
                /**
                 * Scroll to heading when hash url is passed
                 */
                if (window.location.hash) {
                    const hash = window.location.hash.substring(1);

                    scrollToHeading(hash);
                }
            })
            .on('load resize', $.proxy(debounce(this.updateHeadingPositions, 100), this))
            .on('scroll', $.proxy(debounce(this.highlightOnScroll, 100), this));
    }

    updateHeadingPositions () {
        console.log('run');
        console.log(this);

        // Shared Variables
        const $contentHeadings = this.$wysiwygContent.find('h1, h2, h3');
        let i                  = 0;

        // Reset headings
        this.headingPositions = [];

        // Add heading positions
        for (i = 0; i < $contentHeadings.length; i++) {
            let $elem = $($contentHeadings[i]);

            if ($elem.is(':visible')) {
                let id           = $elem.attr('id');
                const headingTop = Math.floor($elem.offset().top);

                // If no ID is set, add one
                if (!id) {
                    id = this.convertToSlug($elem.text());

                    $elem.attr('id', id);
                }

                // Add to array of heading positions
                this.headingPositions.push({
                    'id'         : id,
                    'headingTop' : headingTop - 100
                });
            }
        }

        return this.headingPositions;
    }

    highlightOnScroll () {
        /**
         * Highlight the current heading as you scroll
         */
        let i;
        const highlightOffset = 100;
        const scrollPos       = $(window).scrollTop();
        let matchedHeading    = false;

        for (i = 0; i < this.headingPositions.length; i += 1) {
            if ((scrollPos + highlightOffset) > this.headingPositions[i]['headingTop']) {
                changeWindowUrl(this.headingPositions[i]['id'], true);
                matchedHeading = true;
            }
        }

        if (this.headingPositions.length && !matchedHeading) {
            changeWindowUrl('', true);
        }
    }
}

export default Hashing;

 $(window)
            .on('load', function () {
                /**
                 * Scroll to heading when hash url is passed
                 */
                if (window.location.hash) {
                    const hash = window.location.hash.substring(1);

                    scrollToHeading(hash);
                }
            })
            .on('load resize', $.proxy(debounce(this.updateHeadingPositions, 100), this))
            .on('scroll', $.proxy(debounce(this.highlightOnScroll, 100), this));