我希望用CSS特效来美化我的导航栏。我有以下样式类:
.bg-a1{
background-color: #23e896;
color: white;
}
.bg-a2{
background-color: #1cb374;
color: white;
animation: all 0.3 ease-in-out;
}
.pad-nav-a{
padding: 30px;
}
.pad-nav-b{
padding: 20px;
animation: all 0.3 ease-in-out;
}
现在,我想在scrollTop > 10时添加类< strong>pad-nav-b和bg-a2。 我通常使用jQuery:
$(document).ready(function () {
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 10) {
$('#navbar').addClass('pad-nav-b bg-a2');
$('#navbar').removeClass('pad-nav-a bg-a1');
} else {
$('#navbar').removeClass('pad-nav-b bg-a2');
$('#navbar').addClass('pad-nav-a bg-a1');
}
});
});
现在,我想仅使用本机JavaScript。 如何像jQuery一样实时跟踪scrollTop?