您现在的位置是:首页 > Javascript
当前栏目
JS 滚轮事件实现固定在窗口某个位置的元素显现或隐藏
2023-02-18 16:30:18 时间
效果图
html代码
<div id="box"></box>
css代码
html,body{
height: 1000px;
}
#box{
width: 100%;
height: 200px;
background-color: red;
position: fixed;
bottom: 0;
display: none;
}
JavaScript代码
//获取元素
var box = document.getElementById('box');
//判断是否为火狐浏览器
//绑定滚轮事件
if (navigator.userAgent.indexOf('Firefox') != -1) {
document.addEventListener('DOMMouseScroll', wheelFun, false);
} else {
//非火狐
document.onmousewheel = wheelFun;
}
function wheelFun(event) {
//event兼容
var event = event || window.event;
//页面滚动上去的高度兼容
var top = document.documentElement.scrollTop || document.body.scrollTop;
//判断鼠标滚动方向
if (event.detail) {
if(event.detail > 0) {
console.log('向下');
} else {
console.log('向上');
}
} else if (event.wheelDelta) {
//非火狐
if (event.wheelDelta > 0) {
//console.log('向上');
top--;
} else {
//console.log('向下');
top++;
}
//简单判断 改变box的样式
if (top > 200) {
box.style.display = 'block';
} else {
box.style.display = 'none';
}
相关文章
- [angularjs] angularjs系列笔记(六)http
- [angularjs] angularjs系列笔记(五)Service
- [angularjs] angularjs系列笔记(四)过滤器
- [angularjs] angularjs系列笔记(四)控制器
- [angularjs] angularjs系列笔记(三)模型
- [angularjs] angularjs系列笔记(二)指令
- [nodejs] nodejs开发个人博客(七)后台登陆
- [angularjs] angularjs系列笔记(一)简介
- [nodejs] nodejs开发个人博客(六)数据分页
- [nodejs] nodejs开发个人博客(五)分配数据
- [nodejs] nodejs开发个人博客(四)数据模型
- [nodejs] nodejs开发个人博客(二)入口文件
- [nodejs] nodejs开发个人博客(一)准备工作
- [日常] json_encode对中文和引号的处理差异研究
- [javaEE] jsp的九大隐式对象
- [javaEE] jsp的指令
- [javaEE] jsp入门
- [javascript] Promise简单学习使用
- [android] WebView与Js交互
- [javascript] 看知乎学习js事件触发过程