2017-08-29 9 views
0

スクロール中にこのコードを使用してメニューID #shiftnav-toggle-mainをフェードイン/アウトするのに成功しました。別のIDを組み込むことを検討しています。 #side-toggle私の関数には、新しいIDのすべてのコードを複製せずに、これを行うより良い方法があるかどうかはわかりません。jQuery関数に別のCSS idを追加する

var menu = jQuery("#shiftnav-toggle-main"); 
var opacity = menu.css("opacity"); 
var scrollStopped; 
var fadeInCallback = function() { 
    if (typeof scrollStopped != 'undefined') { 
     clearInterval(scrollStopped); 
    } 
    scrollStopped = setTimeout(function() { 
     menu.animate({ opacity: 1 }, "slow"); 
    }, 500); 
}; 
jQuery(window).scroll(function() { 
    if (!menu.is(":animated") && opacity == 1) { 
    menu.animate({ opacity: 0 }, "slow", fadeInCallback); 
    } else { 
     fadeInCallback.call(this); 
    } 
}); 
+3

あなた 'jQueryの( "#1 shiftnav-トグルメイン、#側-トグル")を使用して試すことができます;' –

+0

Sletherenを、Iクラスを追加できませんbcs私は外部プラグインを参照しています.. Chirag、私はすでにそれを試しましたが、うまくいきませんでした.. –

答えて

1

あなたはメカニズムを処理する関数を作成することができます。

let scrollStopped; 

let fadeInCallback = function() { 
    if (typeof scrollStopped != 'undefined') { 
    clearInterval(scrollStopped); 
    } 
    scrollStopped = setTimeout(function() { 
    menu.animate({ 
     opacity: 1 
    }, "slow"); 
    }, 500); 
}; 

let handleScrollFade = function(id) { 
    let menu = $(id); 
    let opacity = menu.css("opacity"); 

    $(window).scroll(function() { 
    if (!menu.is(":animated") && opacity == 1) { 
     menu.animate({ 
     opacity: 0 
     }, "slow", fadeInCallback); 
    } else { 
     fadeInCallback.call(this); 
    } 
    }); 

} 

handleScrollFade('#shiftnav-toggle-main'); 
handleScrollFade('#side-toggle'); 
+0

#side-toggleがiframeとしてロードされている場合、Ivanはこの作業を行いますか?