实现滚轮下滑隐藏导航上滑显示
2019-07-15 本文已影响0人
杉虎
CSS样式
header div{
background: linear-gradient(to right,blue,green);
height: 70px;
width: 100%;
position: fixed;
left: 0;
top: 0;
transition-property:top,opacity;
transition-duration: 1s ;
}
HTML内容
<body>
<header>
<div id="header"></div>
</header>
</body>
script内容
var agent = navigator.userAgent;
var header = document.getElementById('header')
if (/.*Firefox.*/.test(agent)) {
document.addEventListener("DOMMouseScroll", function(e) {
e = e || window.event;
var detail = e.detail;
if (detail > 0) {
header.style.display = 'block';
} else {
header.style.display = 'none';
}
});
} else {
document.onmousewheel = function(e) {
e = e || window.event;
var wheelDelta = e.wheelDelta;
if (wheelDelta > 0) {
header.style.top = '0px';
// header.style.display = 'block';
header.style.opacity = '1';
} else {
header.style.top = '-70px';
header.style.opacity = '0';
// header.style.display = 'none';
}
}
}
