qjmfd2022 2023-12-12 11:36 采纳率: 50%
浏览 29
已结题

前端 内容一边正常上下滚动，一边显示只显示对应的内容

类似这样子的结构，右边li里为图，正常跟浏览器滚动条滚动。左边dt里的li只显示和右边的li对应显示。并且当前屏固定在这里的感觉，类似酷家乐https://www.kujiale.com/ 里4大工具，引领高效设计这里的这样子的效果。也可以有偿请教。

  • 写回答

14条回答

  • weixin_44407773 2023-12-12 13:23
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container{
      display: flex;
    }

    .active{
      color: red;
    }

    .left-side{
      position: fixed;
      width: 50%;
    }

    .right-side{
      width: 50%;
      margin-left: 50%;
    }

    .right-side ul{
      list-style: none;
      padding-left: 0;
    }

    .right-side li{
      height: 100vh; /* Ensure each right-side li takes up a full viewport height */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .right-side img{
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-side">
      <ul>
        <li class="active">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <div class="right-side">
      <ul>
        <li><img src="666.png" /></li>
        <li><img src="666.png" /></li>
        <li><img src="666.png" /></li>
      </ul>
    </div>
  </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener('scroll', function() {
    var leftItems = document.querySelectorAll('.left-side li');
    var rightItems = document.querySelectorAll('.right-side li');

    rightItems.forEach(function(elem, i) {
      var rect = elem.getBoundingClientRect();
      if (rect.bottom <= 0) { // check if entire element has been scrolled past
        leftItems.forEach(function(item) {
          item.classList.remove('active');
        });
        leftItems[i+1]?.classList.add('active');
      }
    });
  });
});
</script>

</body>
</html>

    我这里左边tiem是变红特效，您可以自己改成想要的特效来切换展示

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(13条)

报告相同问题？

问题事件

  • 系统已结题 12月22日
  • 已采纳回答 12月14日
  • 赞助了问题酬金15元 12月12日
  • 修改了问题 12月12日
  • 展开全部