首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在div中滚动浏览部分时将活动类添加到菜单li

,可以通过监听滚动事件来实现。

首先,给菜单li添加一个活动类,用于标识当前活动的菜单项。可以在HTML中为菜单li添加一个初始的活动类,例如:

代码语言:txt
复制
<ul>
  <li class="active">菜单项1</li>
  <li>菜单项2</li>
  <li>菜单项3</li>
  <li>菜单项4</li>
</ul>

接下来,在JavaScript中监听div的滚动事件,并根据滚动位置来判断当前应该添加活动类的菜单项。可以使用scroll事件来监听滚动,然后通过scrollTop属性获取滚动的垂直距离。

代码语言:txt
复制
var menuItems = document.querySelectorAll('ul li');
var div = document.querySelector('div');

div.addEventListener('scroll', function() {
  var scrollTop = div.scrollTop;
  
  // 根据滚动位置判断当前活动的菜单项
  for (var i = 0; i < menuItems.length; i++) {
    var menuItem = menuItems[i];
    var section = document.querySelector(menuItem.getAttribute('data-section'));
    var sectionTop = section.offsetTop;
    var sectionHeight = section.offsetHeight;
    
    if (scrollTop >= sectionTop && scrollTop < sectionTop + sectionHeight) {
      menuItem.classList.add('active');
    } else {
      menuItem.classList.remove('active');
    }
  }
});

上述代码中,我们通过data-section属性来指定每个菜单项对应的内容区块,然后根据滚动位置判断当前活动的菜单项。如果滚动位置在某个内容区块的范围内,则给对应的菜单项添加活动类,否则移除活动类。

需要注意的是,上述代码中的data-section属性需要在HTML中进行相应的设置,例如:

代码语言:txt
复制
<ul>
  <li class="active" data-section="#section1">菜单项1</li>
  <li data-section="#section2">菜单项2</li>
  <li data-section="#section3">菜单项3</li>
  <li data-section="#section4">菜单项4</li>
</ul>

<div>
  <div id="section1">内容区块1</div>
  <div id="section2">内容区块2</div>
  <div id="section3">内容区块3</div>
  <div id="section4">内容区块4</div>
</div>

这样,当滚动div时,会根据滚动位置自动添加活动类到对应的菜单项。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,无法给出具体的链接地址。但腾讯云提供了丰富的云计算服务,可以根据具体需求选择适合的产品,例如云服务器、云数据库、云存储等。可以通过腾讯云官方网站或者搜索引擎进行相关产品的了解和查找。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券