源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 固定导航的特效代码，超级实用 [打印本页]
作者: 洪七公    时间: 2022-4-10 12:45
标题: 固定导航的特效代码，超级实用

今天乞丐在美化一个房产头部菜单代码的时候，需要做到导航随着页面下拉固定在顶部的位置，但是还得照顾到菜单上部分的内容，这里给出一段代码，效果非常不错，你可以保存到本地的html页面直接双击预览效果就可以

  1. <!DOCTYPE html>
  2. <html lang="en">

  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. </head>
  10. <style>
  11.     * {
  12.         margin: 0;
  13.         padding: 0;
  14.     }
  15.    
  16.     .box {
  17.         height: 2000px;
  18.     }
  19.    
  20.     #wrap {
  21.         background-color: rgba(0, 0, 0, 0.2);
  22.         width: 100%;
  23.         height: 100px;
  24.     }
  25.    
  26.     #wrap[data-fixed="fixed"] {
  27.         position: fixed;
  28.         top: 0;
  29.         left: 0;
  30.         margin: 0;
  31.     }
  32.    
  33.     .content {
  34.         height: 2000px;
  35.     }
  36.    
  37.     p {
  38.         height: 500px;
  39.     }
  40. </style>


  43. <body>
  44.     <div class="box">
  45.         <p>
  46.             <div id="wrap"></div>
  47.         </p>
  48.         <div class="content">
  49.             hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world
  50.             hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
  51.             world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world
  52.             hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world
  53.             hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world
  54.             hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello
  55.             worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello world hello world hello world hello worldhello world hello worldhello world hello worldhello
  56.             world hello world hello world hello worldhello world
  57.         </div>
  58.     </div>

  60. </body>

  62. <script>
  63.     var obj = document.getElementById("wrap");
  64.     var ot = obj.offsetTop;
  65.     document.onscroll = function() {
  66.         var st = document.body.scrollTop || document.documentElement.scrollTop;
  67.         obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")

  69.     }
  70. </script>

  72. </html>
复制代码




欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3