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:// ...
随机推荐
- angular过滤器在html和js中的使用
在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为: 变量 = $filter("过滤器名称")(被过滤数 ...
- 试工具_ab
目录 一.简介 二.例子 三.参数 一.简介 ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基于URL的. 1.ab每次只能测试一个URL,适合做重复压力测 ...
- [BUUCTF]PWN9——ciscn_2019_en_2
[BUUCTF]PWN9--ciscn_2019_en_2 题目网址:https://buuoj.cn/challenges#ciscn_2019_en_2 步骤: 例行检查,64位,开启了NX保护 ...
- 教会你彻底解决android studio c/c++ jni代码无法跳转
时不时总会遇到原来c c++ jni代码跳转很欢乐,突然也不知道咋滴了build也能build成功,运行也能正常运行,就是代码不能跳转了,首先来科普下一些背景知识. 如果让代码跳转起来,大概需要做哪些 ...
- LuoguP7505 「Wdsr-2.5」小小的埴轮兵团 题解
Content 给出一个范围为 \([-k,k]\) 的数轴,数轴上有 \(n\) 个点,第 \(i\) 个点的位置为 \(a_i\).有 \(m\) 次操作,有且仅有以下三种: 1 x:所有点往右移 ...
- TCP 长连接保活机制&HTTP长连接设置
TCP KeepAlive Wireshark抓包分析机制 -------------------------------- 如上图所示,TCP保活报文总是成对出现,包括TCP保活探测报文和TCP保活 ...
- nginx配置文件简析
https://blog.csdn.net/wangbin_0729/article/details/82109693 #运行用户 user www-data; #启动进程,通常设置成和cpu的数量相 ...
- .Net Core 文件打包压缩
最近项目需要实现多文件打包的功能,尝试了一些方法,最后发现使用 ICSharpCode.SharpZipLib 最符合项目的要求. 具体实现如下: 1.在 Nuget 中安装 ICSharpCod ...
- JS判断是否为“YYYYMMDD”式的日期
function isDate8(sDate) { if (!/^[0-9]{8}$/.test(sDate)) { return false; } var year, month, day; yea ...
- Spring整合ActiveMQ实现消息延迟投递和定时投递
linux(centos)系统安装activemq参考:https://www.cnblogs.com/pxblog/p/12222231.html 首先在ActiveMQ的安装路径 /conf/ac ...