不多说 直接上代码
JS部分,利用滚轮位置判断是否到顶
function scrollCheck() {
if (document.documentElement.scrollTop == 0) {
document.querySelector('#nav').className = 'layui-nav';
document.querySelector('#nav').style.animation='changeAlpha 0.5s linear';
}
else if(document.documentElement.scrollTop > 150){
document.querySelector('#nav').className = 'layui-nav layui-bg-gray';
document.querySelector('#nav').style.animation='none';
}
}
window.onscroll = function () { scrollCheck(); };
CSS动画部分,自写动画,更改背景的不透明度
.layui-nav{
background: rgba(255, 255, 255, 0);
animation-name:changeAlpha;
animation-duration: 0.5s;
animation-timing-function: linear;
}
@keyframes changeAlpha{
0%{
background: #fafafa
}
100%{
background: rgb(255, 255, 255,0);
}
}