zoukankan      html  css  js  c++  java
  • 【javascript】菜单滚动至顶部后固定

    现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 position 的值。

    html 代码:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
        <style type="text/css">
        .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}
        .header{height:150px;}
        #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}
        a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="header"></div>
            <div id="nav">
                <a href="#">11111</a>
                <a href="#">22222</a>
                <a href="#">33333</a>
                <a href="#">44444</a>
                <a href="#">55555</a>
            </div>
        </div>
    </body>
    </html>
    <script type="text/javascript" src="menuFixed.js"></script>
    <script type="text/javascript">
    window.onload = function(){
        menuFixed('nav');
    }
    </script>

    menuFixed.js 代码:

    function menuFixed(id){
        var obj = document.getElementById(id);
        var _getHeight = obj.offsetTop;
        
        window.onscroll = function(){
            changePos(id,_getHeight);
        }
    }
    function changePos(id,height){
        var obj = document.getElementById(id);
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop < height){
            obj.style.position = 'relative';
        }else{
            obj.style.position = 'fixed';
        }
    }

    最后需要说明的是,该效果在 ie6 下不支持,因为 ie6 不支持 position:fixed;

  • 相关阅读:
    崔工读过的技术书籍,持续更新中!
    Python-S9——Day110-Git继续
    Python-S9——Day115-Flask Web框架
    树形dp 之 小胖守皇宫
    线性dp 之 奶牛渡河
    网课神器之obs-studio的安装使用
    Convert to Ones
    UVA 10653.Prince and Princess
    HDOJ 1051. Wooden Sticks
    洛谷P1063.能量项链
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2866782.html
Copyright © 2011-2022 走看看