2016-12-14 18 views
0

メインテーマの機能を持っています(devtoolsプロファイラ)。すべてのスクロールイベントで実行され、遅延やデバウンスはありません。それにもかかわらず、この機能は私がテーマを使用している動作では役に立たないと思われますので、オーバーライドして削除したいのですが、それを達成できません。親テーマのmain.jsファイルから子テーマjsファイルを使用してjavascript関数を削除する方法

main.jsファイル内の関数は次のようになります。

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; 
} 
} 

機能は、それが

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

でスクロールイベントにバインドされ定義された後、私はすでに記述しようとしました私の子供のテーマのjsファイル

function fusionSideHeaderScroll() { 
    //do nothing 
} 

この場合、関数はまだ実行されたままですすべてのスクロールイベントにアタッチされているため、論理的になります。 javascriptを使ってスクロールイベントから関数をデタッチする方法はありますか?

+1

元の関数 'fusionSideHeaderScroll(内部コードを貼り付け)'あなたが –

+0

あなたのイベントをアンバインドするために使用することができ、そこに何かがあるはずセルジオが言ったように、スクロールイベントをアンバインドすることができるはずです。関数を置き換えることができない理由は、おそらくスコープの問題によるものです。この例を参照してください。 https://jsfiddle.net/3e03p5z6/1/ –

+0

@SergioAlen、私は自分の投稿を編集しました。あなたはsthを見つけることができます。関数のバインドを解除する! – DoUtDes

答えて

1

このように、スクロールのバインドを解除してみてください.off()を使用してイベントのサイズを変更:

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

アドバイスをいただきありがとうございます。悲しいことに、私の問題は解決していないようですが、このコードを子テーマのjsファイルに配置しようとすると、fusionSideHeaderScrollが定義されていないというエラーメッセージが表示されます。 – DoUtDes

+0

大丈夫ですので、私はあなたのアドバイスをmain.jsファイルに貼り付けようとしましたが、何が起こっているのかを確認するだけです。次に、目的のエフェクトが発生し、スクロール・イベントが切り離されます。だから問題は、これを別の外部ファイルからどうやって達成できるのか、それが今までにはうまくいかない理由です。これは、関数がグローバル関数ではないためですか? – DoUtDes

+0

あなたのサイトは生きていますか?私たちが見えるようにリンクを共有することはできますか?スコープの問題である可能性が最も高いです。 –

関連する問題