顯示在滾動操作和淡化的Javascript

-1

myID = document.getElementById("responsive-menu-button"); 

`enter code here`var myScrollFunc = function() { 
    var y = window.scrollY; 
    if (y >= 200) { 
    myID.className = "bottomMenu show" 
    } else { 
    myID.className = "bottomMenu hide" 
    } 
}; 

window.addEventListener("scroll", myScrollFunc);

但目前它只是顯示和隱藏DIV。我想添加一個淡入淡出的效果，如.fadeIn();，但我無法在代碼片段中的chromes開發工具中使用它。

任何想法？所有帶'$'的腳本似乎都不適用於chromes代碼片段測試器。

感謝

來源

2017-06-08 Harvey

您是否包括jQuery的實現呢？你是如何嘗試'.fadeIn（）'？請注意'myID'不是一個jQuery對象，所以'.fadeIn（）'不直接與它一起工作。 – JJJ

嗨，我現在正在查找並嘗試一些jQuery腳本，稍後將發佈我的問題 – Harvey

可以使用簡單的CSS和JS

CSS是#responsive-menu-button{transition: all ease .6s;}

和JavaScript

if (y >= 200) { 
    myID.className = "bottomMenu" 
    myID.style.opacity='.1'; 
    setTimeout(function(){myID.style.display='none'},600); 
} 
else { 
    myID.className = "bottomMenu" 
    myID.style.display=''; 
    myID.style.opacity='1'; 
}

來源

2017-06-08 11:39:07

如果它工作正常，請將此答案標記爲可接受的 –

您能否將一些完整的Jquery代碼粘貼到我的工作中？編輯小CSS？我發現了一些在線，但有些只是不按預期工作，讓我找到一個，我會發布的代碼和我有問題:) – Harvey

if（y> = 200）{$（'＃responsive-menu fadeOut（）;} else {$（'#response-menu-button'）。fadeIn（）;} –

顯示在滾動操作和淡化的Javascript

回答

相關問題