鼠标滚轮向上出现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>
<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>
相关文章推荐
- 顶部导航--向上滚动的时候出现,向下滚动的时候隐藏
- iOS从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题
- js判断鼠标滚动放下,向上滚还是向下滚?
- css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。
- vi进入编辑模式,按向左,向右,向上,向下,出现A,B,C,D字符解决方法
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- 【荐】纯CSS打造超酷的圆角菜单,鼠标移过向上/向下扩张
- js鼠标滑过导航菜单出现相应的内容
- iOS导航栏的隐藏(优化导航出现和隐藏的问题)
- div的溢出和隐藏加动画出现鼠标滑动效果
- 实现用户在ListView上进行选择时出现向上或向下获取更多提示
- jquery鼠标移入移出变色和单击隐藏出现事件
- jQuery实现鼠标经过时出现隐藏层文字链接的方法
- 修改QuickLaunch快速启动栏导航菜单为鼠标移过出现子菜单型
- android窗体动画:activity启动从底部向上滑动出现,关闭的时候从顶部向下滑动消失,并解决activity跳转的时候出现短暂的黑屏
- 就是把QQ拖到显示器顶端QQ就隐藏了,鼠标指上去就出现了。
- js鼠标移动导航菜单出现下拉菜单
- 鼠标经过图片时图片上出现文字,鼠标移出时隐藏
- 出现在页面左侧鼠标指向滑出的导航菜单代码
- jquery实现鼠标向下滚动右侧才出现返回顶部链接