Waypoint.js sticky is not removing, when reaches end of the component or next component

[prabhumachismo]

Hi All,

In my page waypoint sticky was working fine in all places, but suddenly it was not working, like adding sticky is working fine when the page is scrolled. But when support tab(applied waypoint sticky to this component) reaches the end of that component or when reaching the next component(Reference Component) by scrolling, it supposes to remove the sticky part, Kindly check with live page link.

Thanks in advance friends

Code:

/* set waypoint on the support tabs with id="support_tabs"
When scrolling past the waypointadd add the class "catch-navbar". 
========================================================================== */
var supportTabs = document.getElementById('support_tabs');
var supportTabsWaypoint = new Waypoint({
    element: supportTabs,
    handler: function(direction) {
        if(direction === 'up'){ 
            supportTabs.className = 'support-tabs'
            supportTabs.style.paddingTop = '0'
        } else {
            supportTabs.className = 'support-tabs catch-navbar'
            supportTabs.style.paddingTop = supportNavHeight + 'px'
        }
    }
})

/* set waypoint on the element immediatly following the end of the tabs.
When scrolling past the waypoint, remove the class "catch-navbar" which 
returns the navbar to its original position. ============================
========================================================================= */
var endSupportTabs = supportTabs.nextElementSibling
var endSupportTabsWaypoint = new Waypoint({
    element: endSupportTabs,
    handler: function(direction) {
        if(direction === 'up') { 
            supportTabs.className = 'support-tabs catch-navbar'
            supportTabs.style.paddingTop = supportNavHeight + 'px'
        } else { 
            supportTabs.className = 'support-tabs'
            supportTabs.style.paddingTop = '0'
        }
    }
})

})

[prabhumachismo]

Can anyone guide me to resolve issue???