zoukankan      html  css  js  c++  java
  • CSS滑动高亮侧边栏

    一 利用a标签中锚点定位(name定位):

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <style>
    10     .banner {
    11       position: fixed;
    12       top: 0px;
    13     }
    14 
    15     .content {
    16       display: flex;
    17       flex-direction: column;
    18       align-items: center;
    19     }
    20 
    21     .content a {
    22       display: inline-block;
    23        100px;
    24       height: 400px;
    25       border: 1px solid red;
    26     }
    27   </style>
    28 </head>
    29 
    30 <body>
    31   <!-- 
    32 1 name定位:
    33 //锚记
    34 <a href="#mao">点击此处到指定位置</a>
    35 //锚记位置
    36 <a name="mao">指定位置</a>
    37 
    38 2 id定位:
    39 //锚记
    40 <a href="#mubiao">点击此处到目标位置</a>
    41 //锚记位置
    42 <div id="mubiao">
    43  目标位置
    44 </div>
    45 
    46    -->
    47   <div class="banner">
    48     <a href="#mao">00</a>
    49     <a href="#mao1">11</a>
    50     <a href="#mao2">22</a>
    51     <a href="#mao3">33</a>
    52   </div>
    53   <div class="content">
    54     <a name="mao">指定位置00</a>
    55     <a name="mao1">指定位置11</a>
    56     <a name="mao2">指定位置22</a>
    57     <a name="mao3">指定位置33</a>
    58   </div>
    59 </body>
    60 
    61 </html>
    View Code

    二 锚点平滑跳转,导航跟随页面滚动到指定高度:https://blog.csdn.net/GLyihu/article/details/95943988

  • 相关阅读:
    SVG 支持动画
    js ==与===区别(两个等号与三个等号
    PHP设计模式之单例模式
    MySQL函数大全 及用法示例
    MySQL存储过程和函数
    MYSQl left join联合查询效率分析
    STL 算法[转 ]
    PHP 调整浏览器缓存
    php filter_var[转]
    C++ string学习[转]
  • 原文地址:https://www.cnblogs.com/terrymin/p/15421579.html
Copyright © 2011-2022 走看看