How to remove a javascript function from a parent theme main.js file with a child theme js file

Question

I have a function of a main theme, which takes up to 71% of the costs (devtools profiler), because the function is executed with every scroll event and without delay or debouncing. Nevertheless the function seems to be useless in the behaviour I am using the theme, so I'd like to remove it by overriding it, but can't get it done.

The function in the main.js file looks like:

function fusionSideHeaderScroll() {
var $mediaQueryIpad = Modernizr.mq( 'only screen and (min-device-width: 768px) and (max-device-width: 1366px) and (orientation: portrait)' ) ||  Modernizr.mq( 'only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)' ),
    $documentHeight,
    $windowPosition,
    $windowHeight,
    $bodyHeight,
    $adminbarHeight,
    $sideHeader,
    $sideHeaderWrapper,
    $sideHeaderHeight,
    $boxedWrapperOffset,
    $topOffset;

if ( ! $mediaQueryIpad ) {
    $documentHeight     = jQuery( document ).height();
    $windowPosition     = jQuery( window ).scrollTop();
    $windowHeight       = jQuery( window ).height();
    $bodyHeight         = jQuery( 'body' ).height();
    $adminbarHeight     = jQuery( '#wpadminbar' ).height();
    $sideHeader         = jQuery( '#side-header' );
    $sideHeaderWrapper  = jQuery( '.side-header-wrapper' );
    $sideHeaderHeight   = $sideHeaderWrapper.outerHeight();
    $boxedWrapperOffset = 0;

    if ( jQuery( 'body' ).hasClass( 'layout-boxed-mode' ) && jQuery( 'body' ).hasClass( 'side-header-right' ) ) {
        $sideHeader = jQuery( '.side-header-wrapper' );
        $boxedWrapperOffset = jQuery( '#boxed-wrapper' ).offset().top;
    }

    if ( Modernizr.mq( 'only screen and (max-width:' + avadaVars.side_header_break_point + 'px)' ) ) {

        if ( ! $sideHeader.hasClass( 'fusion-is-sticky' ) ) {
            $sideHeader.css({
                'bottom': '',
                'position': ''
            });
        }

        return;
    }

    if ( $sideHeaderHeight + $adminbarHeight > $windowHeight ) {
        $sideHeader.css( 'height', 'auto' );
        if ( $windowPosition > window.lastWindowPosition ) {
            if ( window.avadaTop ) {
                window.avadaTop = false;
                $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;
                $sideHeader.attr( 'style', 'top: ' + $topOffset + 'px; height: auto;' );
            } else if ( ! window.avadaBottom && $windowPosition + $windowHeight > $sideHeaderHeight + $sideHeaderWrapper.offset().top && $sideHeaderHeight + $adminbarHeight < $bodyHeight ) {
                window.avadaBottom = true;
                $sideHeader.attr( 'style', 'position: fixed; bottom: 0; top: auto; height: auto;' );
            }
        } else if ( $windowPosition < window.lastWindowPosition ) {
            if ( window.avadaBottom ) {
                window.avadaBottom = false;
                $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;
                $sideHeader.attr( 'style', 'top: ' + $topOffset + 'px; height: auto;' );
            } else if ( ! window.avadaTop && $windowPosition + $adminbarHeight < $sideHeaderWrapper.offset().top ) {
                window.avadaTop = true;
                $sideHeader.attr( 'style', 'position: fixed; height: auto;' );
            }
        } else {
            window.avadaTop = window.avadaBottom = false;

            $topOffset = ( $sideHeaderWrapper.offset().top > 0 ) ? $sideHeaderWrapper.offset().top - $boxedWrapperOffset : $adminbarHeight;

            if ( $windowHeight > window.lastWindowHeight && $bodyHeight > $sideHeaderWrapper.offset().top  + $boxedWrapperOffset + $sideHeaderHeight && $windowPosition + $windowHeight > $sideHeaderWrapper.offset().top + $sideHeaderHeight ) {
                $topOffset += $windowHeight - window.lastWindowHeight;
            }
            $sideHeader.attr( 'style', 'top:' + $topOffset + 'px; height: auto;' );
        }
    } else {
        window.avadaTop = true;
        $sideHeader.attr( 'style', 'position: fixed;' );
    }

    window.lastWindowPosition = $windowPosition;
    window.lastWindowHeight   = $windowHeight;
}
}

After the function is defined it is binded to a scroll event with

// Make the side header scrolling happen
jQuery( window ).on( 'scroll', fusionSideHeaderScroll );
jQuery( window ).on( 'resize', fusionSideHeaderScroll );

I've already tried to write in my child theme's js file

 function fusionSideHeaderScroll() {
     //do nothing
 }

In this case the function still remains to be executed, which seems to be logicial since it is attached to every scroll event. Is there a way to detach the function from the scroll event with javascript?

Answer 1

Try unbinding the scroll and resize events using .off() , like this:

jQuery( window ).off( 'scroll', fusionSideHeaderScroll );
jQuery( window ).off( 'resize', fusionSideHeaderScroll );