js滚动页面时右侧锚点菜单随左侧内容高亮

需求

网页左右布局,左侧内容右侧菜单,当内容滚动时右侧菜单项高亮,点击锚点菜单同样可以定位内容

结构

  <div class="container">
    <div class="list">
      <div class="item" id='1'>1</div>
      <div class="item" id='2'>2</div>
      <div class="item" id='3'>3</div>
      <div class="item" id='4'>4</div>
      <div class="item" id='5'>5</div>
      <div class="item" id='6'>6</div>
    </div>
    <div class="menu">
      <div><a href="#1">item 1</a></div>
      <div><a href="#2">item 2</a></div>
      <div><a href="#3">item 3</a></div>
      <div><a href="#4">item 4</a></div>
      <div><a href="#5">item 5</a></div>
      <div><a href="#6">item 6</a></div>
    </div>
  </div>

样式

    .container {
      display: flex;
      align-items: flex-start;
    }

    .list {
      flex: 1;
    }

    .item {
      background-color: #d7d7d7;
      border-radius: 10px;
      height: 500px;
      width: 500px;
      margin-bottom: 20px;
      padding: 20px;
    }

    .menu {
      border-left: 1px solid #d7d7d7;
      padding-left: 15px;
      font-size: 14px;
      color: #d7d7d7;
      position: sticky;
      top: 30px;
    }

    a {
      color: #d7d7d7;
    }

    a.active {
      color: #f00;
    }

可以将右侧菜单设施sticky定位,滚动时可以固定

事件

  window.onscroll = function () {
    //scrollTop就是触发滚轮事件时滚轮的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log("滚动距离" + scrollTop);
    const list = document.querySelectorAll('a');
    if (scrollTop < 510) {
      list.forEach(item => {
        item.classList = [];
      })
      list[0].classList.add('active')
    } else if (scrollTop > 550 && scrollTop < 1090) {
      list.forEach(item => {
        item.classList = [];
      })
      list[1].classList.add('active')
    } else if (scrollTop > 1090 && scrollTop < 1645) {
      list.forEach(item => {
        item.classList = [];
      })
      list[2].classList.add('active')
    } else if (scrollTop > 1645 && scrollTop < 2210) {
      list.forEach(item => {
        item.classList = [];
      })
      list[3].classList.add('active')
    } else if (scrollTop > 2210 && scrollTop < 2780) {
      list.forEach(item => {
        item.classList = [];
      })
      list[4].classList.add('active')
    } else if (scrollTop > 2780) {
      list.forEach(item => {
        item.classList = [];
      })
      list[5].classList.add('active')
    }
  }

这里用了笨方法,自己滚动浏览器获取到的左侧内容的高度,然后判断给右侧菜单项目加高亮而已

效果

在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过以下几个步骤实现: 1. 在菜单中添加点击事件,获取对应的锚点id。 2. 使用`ref`属性获取到内容容器的元素。 3. 在内容容器上绑定`scroll`事件,监听滚动位置。 4. 根据当前滚动位置,判断哪个锚点处于可视范围内,并高亮对应的菜单项。 具体代码如下: 菜单部分: ``` <template> <div> <ul> <li v-for="item in menu" :key="item.id" @click="scrollToAnchor(item.id)" :class="{active: activeAnchor === item.id}"> {{ item.title }} </li> </ul> </div> </template> <script> export default { data() { return { menu: [ { id: 'a1', title: '锚点1' }, { id: 'a2', title: '锚点2' }, { id: 'a3', title: '锚点3' } ], activeAnchor: '' // 当前激活的锚点id } }, methods: { scrollToAnchor(anchorId) { // 获取对应的锚点元素 const anchorElement = document.getElementById(anchorId); if (anchorElement) { // 滚动锚点位置 anchorElement.scrollIntoView({ behavior: 'smooth' }); // 设置当前激活的锚点id this.activeAnchor = anchorId; } } } } </script> ``` 内容部分: ``` <template> <div ref="content" @scroll="onScroll"> <div id="a1">锚点1内容</div> <div id="a2">锚点2内容</div> <<div id="a3">锚点3内容</div> </div> </template> <script> export default { methods: { onScroll() { // 获取内容容器的高度和滚动位置 const contentHeight = this.$refs.content.offsetHeight; const scrollTop = this.$refs.content.scrollTop; // 遍历所有锚点,判断哪个处于可视范围内 for (let i = 0; i < this.menu.length; i++) { const anchorId = this.menu[i].id; const anchorElement = document.getElementById(anchorId); if (anchorElement) { const anchorTop = anchorElement.offsetTop; const anchorBottom = anchorTop + anchorElement.offsetHeight; if (scrollTop >= anchorTop && scrollTop < anchorBottom) { // 设置当前激活的锚点id this.$emit('active-anchor', anchorId); break; } } } } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值