吸顶效果

2019-08-09 10:02:38 作者：互联网

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        img{
            vertical-align: top;
        }
        .top img{
            height:168px;
        }
        .main{
            margin:0 auto;
            width:1000px;
            margin-top:10px;

        }
        
    </style>
</head>
<body>
    <div class="top" id="top">
        <img src="images/top.png" alt=""/>
    </div>
    <div class="nav" id="nav">
        <img src="images/nav.png" alt=""/>
    </div>
    <div class="main">
        <img src="images/main.png" alt=""/>
    </div>
    
    
</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
    var top = $id("top"),
        nav = $id("nav");
    onscroll = function(){
        var stop = document.documentElement.scrollTop || document.body.scrollTop;
        if(stop > 168){
            nav.style.position = "fixed"
            nav.style.top="0"
            nav.style.zIndex= "999"
        }else{
            nav.style.position = "static"
        }
        console.log(stop);
    }
        

    
    
</script>

链接下载完整源码：

https://files-cdn.cnblogs.com/files/g-code/%E5%9B%BA%E5%AE%9A%E5%AF%BC%E8%88%AA%E6%A0%8F_%E9%A1%B6%E9%83%A8%E6%82%AC%E6%B5%AE.zip

标签：style,效果,E5%,top,stop,E6%,nav,吸顶
来源： https://www.cnblogs.com/g-code/p/11325282.html