Using HUBL for hubspot

chapter wrapper - menu creator.html

<div class="side-menu-wrapper">
    <span class="nav-caption">{{ widget.navigation_caption }}:</span>
    <nav>
        <ul class="sidemenu"></ul>
    </nav>
</div>
    
<script>


jQuery(document).ready(function($) {
    var sections = getAllChapterSections();
    var activeMenuItem = window.location.hash;
    var menuIsActive = activeMenuItem.indexOf('#') > -1 ? true : false;
    jQuery('.side-menu-wrapper nav').html(getMenu(menuIsActive));
    watchMenu();
    
});

function getAllChapterSections() {
    chapterSection = [];
    jQuery('.{{ widget.section_class_name }}').each(function() {
        chapterSection.push('#'+jQuery(this).attr('id'));
    });
    return chapterSection;
}

function cleanIdString(dirtyString) {
    cleanString = dirtyString.replace(/^[^a-z]+|[^\w:.-]+/gi, "");
    return cleanString;
}

function getMenu(menuIsActive) {
    var menuhtml = '<ul class="sidemenu">';
    count = 0;
    jQuery('.{{ widget.section_class_name }}').each(function() {
        var id = cleanIdString(jQuery(this).attr('id'));
        // if no hash in the url string and we are on the first one, give it active
        // if no hash in menu and is first item, active is true
        // and if those are not true, the it check to see if the hash matches the chapter section ID and if it does give active, otherwise leave blank
        // then we place the activate variable below in the LI
        var active = (menuIsActive == false && count == 0) ? ' class="active" ': ('#' + id == window.location.hash) ? ' class="active" ' : ' ';
        menuhtml += '<li id="'+id+'-menu"' + active + 'data-menu-jump="' + id +'">'+jQuery(this).data('menu') + '</li>';
        count++;
    });
    return menuhtml += '</ul>';
}

function watchMenu() {
    jQuery('.side-menu-wrapper').on('click', 'li', function() {
        jQuery('.side-menu-wrapper li.active').removeClass('active');
        jQuery(this).addClass('active');
        var newLocation = jQuery(this).data('menu-jump');
        window.location.href = '#' + newLocation;
    })
}

jQuery(function() {
    var $window = jQuery(window),
        $stickyEl = jQuery('.sidemenu'),
        elTop = $stickyEl.offset().top,
        // this will always change to the bottom of where you want the menu to stop at. 
        // the number is just something you need to adjust. I don't have a science behind it yet
        elBottom = jQuery('{{ widget.first_full_width_div_under_the_menu_sction }}').offset().top - $stickyEl.height() - 20;
    

   $window.scroll(function() {
        $stickyEl.toggleClass('visible', $window.scrollTop() < elBottom && $window.scrollTop() > elTop);
    });
});

jQuery.fn.idInView = function(){
    var win = jQuery(window);
    //Object to Check
    obj = jQuery(this);
    var currentId = obj.attr('id');
    //the top Scroll Position in the page
    var scrollPosition = win.scrollTop();
    //the end of the visible area in the page, starting from the scroll position
    var visibleArea = win.scrollTop() + win.height();
    //the end of the object to check
    var objEndPos = (obj.offset().top + obj.outerHeight());
    if(visibleArea >= objEndPos && scrollPosition <= objEndPos) {
        jQuery('.sidemenu li').not('#'+currentId+'-menu').removeClass('active');
        if(!jQuery('.sidemenu li#'+currentId+'-menu').hasClass('active')) {
            jQuery('.sidemenu li#'+currentId+'-menu').addClass('active');
        }
    }
    return false;
};

jQuery(window).on('scroll', function() {
    for(var i=0; i < chapterSection.length; i++) {
        jQuery(chapterSection[i]).idInView();       
    }
});
    
    
</script>