您的位置:首页 > 其它

鼠标滚轮向上出现header导航,滚轮向下隐藏header

2017-12-25 09:31 363 查看
找了个简单的实现,之前是看yahoo这么做的,觉得很不错,用户体验好一点

<script>
var agent = navigator.userAgent;
if (/.*Firefox.*/.test(agent)) {
document.addEventListener("DOMMouseScroll", function(e) {
e = e || window.event;
var detail = e.detail;
if (detail > 0) {
$("#header").css('display','none');
$("#content-box").css('padding-top','0px')
console.log("鼠标向下滚动");
} else {
$("#header").css('display','block');
$("#content-box").css('padding-top','82px')
console.warn("鼠标向上滚动");
}
});
} else {
document.onmousewheel = function(e) {
e = e || window.event;
var wheelDelta = e.wheelDelta;
if (wheelDelta > 0) {
$("#header").css('display','block');
$("#content-box").css('padding-top','82px')
console.log("鼠标向上滚动");
} else {
$("#header").css('display','none');
$("#content-box").css('padding-top','0px')
console.warn("鼠标向下滚动");
}
}
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐