获取scrollTop实现滚动鼠标后悬浮导航

获取scrollTop:

document.documentElement.scrollTop || document.body.scrollTop

鼠标滚轮事件:

onscroll

事件;

悬浮导航例子:

//导航悬浮
var navT = 0;
window.onload = function () {
    var navBox = document.getElementById("navBox");
    var navT = navBox.offsetTop;
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > navT) {
            navBox.style.position = "fixed";
            navBox.style.top = "0";
        }
        else {
            navBox.style.position = "absolute";
            navBox.style.top = "725px";
        }
    }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的实现示例: ```jsx import React, { useState } from 'react'; import { Table } from 'antd'; const dataSource = []; // 表格数据源 // 生成一些模拟数据 for (let i = 0; i < 100; i++) { dataSource.push({ key: i.toString(), name: `User ${i}`, age: Math.floor(Math.random() * 30) + 20, address: `New York No. ${i + 1} Lake Park`, }); } const ScrollTable = () => { const [scrollY, setScrollY] = useState(400); // 表格的纵向滚动高度 // 鼠标悬停事件处理函数 const handleMouseEnter = () => { setScrollY('none'); // 停止滚动 }; // 鼠标离开事件处理函数 const handleMouseLeave = () => { setScrollY(400); // 恢复滚动 }; // 滚轮事件处理函数 const handleWheel = (e) => { const { deltaY } = e; // 滚动方向,正数表示向下滚动,负数表示向上滚动 const tableNode = e.currentTarget.querySelector('.ant-table-body'); // 计算表格当前滚动位置和可滚动距离 const scrollTop = tableNode.scrollTop; const scrollHeight = tableNode.scrollHeight - tableNode.clientHeight; // 根据滚动方向和表格当前滚动位置来计算新的滚动位置 let newScrollTop = scrollTop + deltaY * 20; if (newScrollTop < 0) { newScrollTop = 0; } if (newScrollTop > scrollHeight) { newScrollTop = scrollHeight; } // 设置表格的新的滚动位置 tableNode.scrollTop = newScrollTop; }; const columns = [ // 表格列配置 { title: 'Name', dataIndex: 'name', key: 'name', }, { title: 'Age', dataIndex: 'age', key: 'age', }, { title: 'Address', dataIndex: 'address', key: 'address', }, ]; return ( <Table dataSource={dataSource} columns={columns} scroll={{ y: scrollY }} // 设置表格的纵向滚动高度 onMouseEnter={handleMouseEnter} // 监听鼠标悬停事件 onMouseLeave={handleMouseLeave} // 监听鼠标离开事件 onWheel={handleWheel} // 监听鼠标滚轮事件 /> ); }; export default ScrollTable; ``` 在这个示例中,我们使用了`useState`钩子来定义表格的纵向滚动高度,并在鼠标悬停和离开事件处理函数中修改了这个高度,从而实现了停止和恢复滚动的效果。同时,我们使用了`onWheel`事件来监听鼠标滚轮事件,并根据滚轮的滚动方向来修改表格的滚动位置,从而实现了通过滚轮浏览数据的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值