js楼层滚动效果给点思路？

作者站长头像
站长
· 阅读数 4

http://blog.chunten.com/tool.html怎么显示右边滚动，左边应该的类目自己定位，给一点思路。

<script>
   $(document).ready(function() {
    $('.linkLeft a').each(function(index) {
        $(this).on('click', function() {
            $(this).addClass("active")
            $(this).siblings().removeClass('active')
            $('.linkTitle').eq(index).get(0).scrollIntoView({
                behavior: 'smooth',
                block: 'start',
                inline: 'start'
            });
        });
    });
});
</script>

上面代码由乔治帮忙修改完成。

回复
1个回答
avatar
test
2024-06-28

你是想说右边滚动的时候左边的导航栏显示当前所在的类目吗？

<div>
  <a href="#section1">图像</a>
  <a href="#section2">工具</a>
  <a href="#section3">编程</a>
  ...
</div>
<div id="section1">
  <!-- 类目1的内容 -->
</div>

<div id="section2">
  <!-- 类目2的内容 -->
</div>

<div id="section3">
  <!-- 类目3的内容 -->
</div>
// 获取导航栏链接的元素
var navLinks = document.querySelectorAll('.linkLeft a');

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  var currentPosition = window.pageYOffset; // 获取当前滚动位置

  // 遍历导航栏链接
  navLinks.forEach(function(link) {
    var targetId = link.getAttribute('href'); // 获取目标类目的锚点
    var targetElement = document.querySelector(targetId); // 获取目标类目的元素

    // 检查当前滚动位置是否在目标类目的范围内
    if (targetElement.offsetTop <= currentPosition && currentPosition < targetElement.offsetTop + targetElement.offsetHeight) {
      link.classList.add('active'); // 添加活动状态的样式
    } else {
      link.classList.remove('active'); // 移除活动状态的样式
    }
  });
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容