当div触及浏览器顶部时添加类

，可以通过监听滚动事件来实现。具体步骤如下：

1. 首先，给需要监听的div元素添加一个唯一的标识，例如给该div添加一个id属性，如id="myDiv"。
2. 使用JavaScript代码获取该div元素，并添加滚动事件监听器。

var myDiv = document.getElementById("myDiv");
window.addEventListener("scroll", function() {
  // 在滚动事件中执行判断逻辑
});

1. 在滚动事件的回调函数中，判断div元素是否触及浏览器顶部。可以通过获取div元素的位置信息和浏览器的滚动位置来进行判断。

window.addEventListener("scroll", function() {
  var divTop = myDiv.getBoundingClientRect().top; // 获取div元素相对于视口顶部的距离
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 获取浏览器的滚动位置

  if (divTop <= scrollTop) {
    // 当div触及浏览器顶部时添加类
    myDiv.classList.add("className");
  } else {
    // 当div离开浏览器顶部时移除类
    myDiv.classList.remove("className");
  }
});

在上述代码中，需要将"className"替换为你想要添加的类名。

这种技术常用于实现页面滚动时的吸顶效果或导航栏的固定效果。在实际应用中，可以根据具体需求进行样式调整和功能扩展。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe