makoshen 2022-02-11 17:41 采纳率: 100%
浏览 132
已结题

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

  • 写回答

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>
    
    

    https://blog.csdn.net/ddwddw4/article/details/106145196/

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

报告相同问题?

问题事件

  • 系统已结题 2月22日
  • 已采纳回答 2月14日
  • 创建了问题 2月11日

悬赏问题

  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统