固定头部导航栏案例

来源：互联网发布：linux如何创建目录链接编辑：程序博客网时间：2024/05/16 07:30

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0        }        img {            vertical-align: top;        }        #main {            margin: 0 auto;            width: 1000px;        }        .fixed {            position: fixed;            top: 0;            left: 0;        }    </style>    <script src="my.js"></script>    <script>        window.onload=function() {                var topDiv = document.getElementById("top");                var height = topDiv.offsetHeight;                var middle = document.getElementById("Q-nav1");                var main = document.getElementById("main");            window.onscroll=function(){                if(scroll().top>height){                    middle.className+=" fixed";/*注意空格*/                    main.style.paddingTop=middle.offsetHeight+"px";                }else{                    middle.className="";                    main.style.paddingTop=0;                }            }        }    </script></head><body><div id="top">    <img src="images/top.png" alt=""/></div><div id="Q-nav1">    <img src="images/nav.png" alt=""/></div><div  id="main">    <img src="images/main.png" alt=""/></div></body></html>

阅读全文

0 0