zoukankan      html  css  js  c++  java
  • 固定导航栏demo

    代码如下

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin:0;padding:0}
            img{
                vertical-align: top;
            }
            .main{
                margin:0 auto;
                1000px;
                margin-top:10px;
    
            }
            .fixed {
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
    <div class="top" id="top">
        <img src="images/top.png" alt=""/>
    </div>
    <div class="nav" id="Q-nav">
        <img src="images/nav.png" alt=""/>
    </div>
    <div class="main">
        <img src="images/main.png" alt=""/>
    </div>
    </body>
    </html>
    <script src="my.js" type="text/javascript"></script>
    <script>
       var nav = $("Q-nav");
       var navTop = nav.offsetTop;  // 得到导航栏距离顶部的距离  168
       console.log(navTop);
        window.onscroll = function() {
           // console.log(nav.offsetTop);
            if(scroll().top >= navTop)
            {
                // alert("到位置了");
                nav.className = "nav fixed";
            }
            else
            {
                nav.className = "nav";
            }
        }
    </script>

    my.js为自己封装的小插件

    function scroll() {
        if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
        {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
        // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
        {
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
        return { //  剩下的肯定是怪异模式的
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
  • 相关阅读:
    jquery选择器
    js中的闭包技术
    idea创建servlet不能创建:
    JSP页面不解析EL表达式的原因
    大对象数据LoB的应用
    缓冲流、转换流、序列化流相关流知识点
    jdk5.0新特性(注解)
    EKT相关知识(Class类对象的方法补充)
    java中调用存储过程或函数
    Java 缓冲流
  • 原文地址:https://www.cnblogs.com/lhh520/p/8993017.html
Copyright © 2011-2022 走看看