源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 5894|回复: 0

[CSS/Html] 固定导航的特效代码,超级实用

[复制链接]

3089

主题

3485

帖子

12万

金币

超级版主

Rank: 8Rank: 8

积分
253858
发表于 2022-4-10 12:45:35 | 显示全部楼层 |阅读模式

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

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

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <style>
  10.     * {
  11.         margin: 0;
  12.         padding: 0;
  13.     }
  14.    
  15.     .box {
  16.         height: 2000px;
  17.     }
  18.    
  19.     #wrap {
  20.         background-color: rgba(0, 0, 0, 0.2);
  21.         width: 100%;
  22.         height: 100px;
  23.     }
  24.    
  25.     #wrap[data-fixed="fixed"] {
  26.         position: fixed;
  27.         top: 0;
  28.         left: 0;
  29.         margin: 0;
  30.     }
  31.    
  32.     .content {
  33.         height: 2000px;
  34.     }
  35.    
  36.     p {
  37.         height: 500px;
  38.     }
  39. </style>


  40. <body>
  41.     <div class="box">
  42.         <p>
  43.             <div id="wrap"></div>
  44.         </p>
  45.         <div class="content">
  46.             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
  47.             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
  48.             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
  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
  50.             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
  51.             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
  52.             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
  53.             world hello world hello world hello worldhello world
  54.         </div>
  55.     </div>

  56. </body>

  57. <script>
  58.     var obj = document.getElementById("wrap");
  59.     var ot = obj.offsetTop;
  60.     document.onscroll = function() {
  61.         var st = document.body.scrollTop || document.documentElement.scrollTop;
  62.         obj.setAttribute("data-fixed", st >= ot ? "fixed" : "")

  63.     }
  64. </script>

  65. </html>
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-2-22 22:33 , Processed in 0.093750 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明