将jQuery代码翻译成本地JavaScript

Question

我使用jQuery创建了它。

我想在React中使用这些脚本内容，我该怎么办？

$(window).scroll(function(){  
if($(document).scrollTop() > 10){
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});

Answer 1

您可以遵循javascript代码，不是特别的babeljs，但它仍然可以工作：

document.querySelector(window).scroll(function(){  
if(document.querySelector(document).scrollTop > 10){
document.querySelector('header').classList.add('scroll');
} else {
document.querySelector('header').removeClass('scroll');
}
});

Answer 2

接受的答案对我不起作用。它看起来像是通用jquery到javascript转换器吐出的代码。

这就是对我有效的：

<script type="text/javascript">
window.addEventListener('scroll', function() {
if (window.pageYOffset > 10) {
document.querySelector('.header').classList.add('scroll');
} else {
document.querySelector('.header').classList.remove('scroll');
}
});
</script>

注意，我用pageYOffset替换了scrollTop。前者不适用于我在MacOS上的Chrome浏览器。请参阅：window.pageY偏移与文档.dococumentElement.scrollTop

如果支持的话，不要忘记使用被动监听器。

<script type="text/javascript">
// Test via a getter in the options object to see if the passive property is accessed
var supportsPassive = false;
try {
var opts = Object.defineProperty({}, 'passive', {
get: function() {
supportsPassive = true;
}
});
window.addEventListener("testPassive", null, opts);
window.removeEventListener("testPassive", null, opts);
} catch (e) {}
// Use our detect's results. passive applied if supported, capture will be false either way.
window.addEventListener('scroll', function() {
if (window.pageYOffset > 10) {       
document.querySelector('.header').classList.add('scroll');
} else {
document.querySelector('.header').classList.remove('scroll');
}
}, supportsPassive ? { passive: true } : false);
</script>