zoukankan      html  css  js  c++  java
  • 固定导航栏、吸顶效果

    <!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;
    1000px;
    margin-top:10px;

    }
            
    </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 type="text/javascript">
        //当触发滚动条时,获取页面滚走的距离
        //如果页面滚走的距离 大于 头部高度时,开始 吸顶(固定定位)
        
        var h = 168;
        var nav = document.querySelector("#Q-nav");
        window.onscroll = function(){
            //获取页面滚走距离
            var sTop = document.documentElement.scrollTop || document.body.scrollTop;
            if( sTop > h ){
                nav.style.position = "fixed";
                nav.style.top = 0;
            }else{
                nav.style.position = "static";
            }
        }
    </script>
     
  • 相关阅读:
    Ios国际化翻译工具
    软件是什么
    angular2实现图片轮播
    DIV+CSS布局最基本的内容
    angular2中使用jQuery
    如何在Ionic2项目中使用第三方JavaScript库
    Ionic2项目中使用Firebase 3
    Ionic2中ion-tabs输入属性
    The Router路由
    templating(模板)
  • 原文地址:https://www.cnblogs.com/tis100204/p/10328791.html
Copyright © 2011-2022 走看看