js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏
/**
* 页面滑动滚动事件
* @param e
*/
//0为隐藏,1为显示
var s = 1;
function scrollFunc(e) {
// e存在就用e不存在就用windon.event
e = e || window.event;
// 先判断是什么浏览器
if (e.wheelDelta) {
// 浏览器IE,谷歌
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
// console.log("滑轮向上滚动");
if (s == 0) {
//向下滑动
$(".div2").slideDown("slow");
s = 1;
}
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时
// console.log("滑轮向下滚动");
if (s == 1) {
//向上滑动
$(".div2").slideUp("slow");
s = 0;
}
}
} else if (e.detail) {
//浏览器Firefox
if (e.detail > 0) {
//当滑轮向上滚动时
// console.log("滑轮向上滚动");
if (s == 0) {
//向下滑动
$(".div2").slideDown("slow");
s = 1;
}
}
if (e.detail < 0) {
//当滑轮向下滚动时
// console.log("滑轮向下滚动");
if (s == 1) {
//向上滑动
$(".div2").slideUp("slow");
s = 0;
}
}
}
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
//firefox浏览器
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//ie 谷歌浏览器
window.onmousewheel = document.onmousewheel = scrollFunc;
js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏的更多相关文章
- js 监听整个页面的回车事件
JS监听整个页面的回车事件 <script type="text/javascript"> document.onkeydown=keyDownSearch; ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- js监听用户的键盘敲击事件,兼容各大主流浏览器
js监听用户的键盘敲击事件,兼容各大主流浏览器 <script type="text/javascript"> document.onkeydown = functio ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
- js 监听浏览器刷新还是关闭事件 - 转
监听页面关闭: window.onbeforeunload = function() { //鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置 v ...
- js监听当前页面再次加载
document.addEventListener("visibilitychange", function () { if (!document.hidden) { //处于当前 ...
- js 监听浏览器刷新还是关闭事件
转载大神 http://www.cnblogs.com/gavin0517/p/5827405.html
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
随机推荐
- spring的不同事务传播行为和用途。
1.PROPAGATION_REQUIRED:如果当前没有事务,就创建一个事务,如果当前存在事务,就加入该事务,该设置是最常用的设置. 2.PROPAGATION_SUPPORTS:支持当前事务,如果 ...
- scanf("%c\n",&a)和scanf("%c",&a)区别
scanf("%c",&a); 当输入字符的时候,我们按下任意字符 + 回车的时候,回车没有被当作为分隔符,而是作为一个转义字符与输入的字符一起保存在缓存区.第一次scan ...
- 微软开源的Web测试和自动化神器 Playwright
Playwright 是微软开源的一个用于 Web 测试和自动化的框架, 提供了可靠的端到端测试, 功能非常强大, 可以在测试, 爬虫,自动化场景中使用. 跨浏览器 Playwright 支持所有现代 ...
- Mysql配置文件 基本设置
[mysqld] #MySQL启动用户 user = mysql #设置mysql的安装目录 basedir=/usr/local/mysql #mysql.sock存放目录 socket=/var/ ...
- [BUUCTF]PWN——ciscn_2019_ne_5
ciscn_2019_ne_5 题目附件 步骤: 例行检查,32位,开启了nx保护 试运行一下程序,看一下程序的大概执行情况 32位ida载入,shift+f12查看程序里的字符串,发现了flag字符 ...
- box-shadow(盒子阴影)
box-shadow 属性可以设置一个或多个下拉阴影的框 可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开.该属性可设置的值包括阴影的X轴偏移量.Y轴偏移量.模糊半径.扩散半径和颜色. 语法: ...
- Spring5 概述及Spring IOC学习
Spring Framework 5 1. Spring框架 1.1 Spring框架概述 1.2 主要内容 Spring框架是一个开源的JavaEE的应用程序 主要核心是 IOC(控制反转)和AOP ...
- VirtualBox 同时添加 NAT 和 Host-Only 网卡出现无法上网的情况
如果网卡1是 NAT,网卡2是 Host-Only,可以 ping 通 baidu.com. 如果网卡1是 Host-Only,网卡2是 NAT,无法 ping 通 baidu.com. 使用 nmc ...
- LuoguP7043 「MCOI-03」村国 题解
Content 有 \(T\) 组询问,每组询问给定一个有 \(n\) 个节点的数,编号为 \(1\sim n\),每个节点一开始都有权值 \(a_i\).现有 \(m\) 次操作,每次操作选择树上所 ...
- SSM——Spring框架
Spring概念 什么是Spring Spring两大核心 1.IOC 所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管理过程交由Spring框架来处理,从此在开发过程中 ...