滑动添加和移除class标记 - JS笔记

通过JS监听浏览器滑动的高度,满足添加就给指定的ID添加或删除class标记

这段代码会监听网页移动的高度,进而给指定的ID添加class标记

核心JS

    window.addEventListener("scroll", function (e) {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t)
        if (t < 50) {
            document.getElementById("myDIV").classList.remove("mystyle");
        }
        else {
            document.getElementById("myDIV").classList.add("mystyle");
        }
    });

演示

Npcink

  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 向下滚动,我会变色哦
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • 0001
  • https://www.runoob.com/jsref/prop-element-classlist.html
  • https://www.runoob.com/jsref/met-document-getelementsbyclassname.html

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
教程

裁剪上传图片下侧,去掉头条水印 - WordPress教程

2022-7-20 9:07:21

插件

Duplicate Page and Post - 文章和页面模板wordpresss插件

2020-5-11 9:57:59

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索