layui 网站中这个悬浮目录是怎么实现的？

https://www.layui.site/doc/element/layout.html

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

4条回答默认最新

崽崽的谷雨 2022-02-11 17:45

关注

html 锚点了解一下如果只是悬浮那固定定位即可。如果实现点击跳转到对应位置，html锚点可以实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 50px;
    }

    .ml {
      position: fixed;
      right: 20px;
      top: 260px;
      border: 1px solid red;
      width: 200px;
      height: 150px;
    }

    /* ul{
      list-style: none;
    } */
    ul>li {
      width: 100%;
      height: 40px;
      line-height: 40px;

    }
    .vv{
           /* margin-top:800px ; */
    }
  </style>
</head>

<body>
  <div class="box">
   
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    88888888888888888888888888888888888888888899
    999999999999999999999999999999999999999999999
    99999999999999999999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    9999999999999999999999999999999
    <div class="vv">
      <a name="001" id="001">001 </a>
    111111111111111111111111111111111111111111
    111111111111111111111111111111111111111111
    11111111111111111111111111111111111111
    </div>
  </div>
  <div class="ml">
    <ul>
      <li> <a href="#001">跳到001</a></li>
      <li>444</li>
    </ul>
  </div>
</body>

</html>