zoukankan      html  css  js  c++  java
  • 防腾讯固定导航栏

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>防腾讯固定导航栏</title>
        <style type="text/css">
             
              //css经他界面布局
            *{
            	margin:0;padding:0;
            	}
            	.header{
            		  1000px;
    			margin-left: 230px;
            	}
            .main{
                 1000px;
                margin:0 auto;
                margin-top: 20px;
            }
        </style>
            //jQuery函数库的导入
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
           //jQuery的实现
        <script type="text/javascript">
            $(function () {
                var H = $(".top").height();
                $(window).scroll(function () {
                    var docSccrollTop = $(document).scrollTop();
                    if(docSccrollTop > H){
                        $(".nav").css({"position":"fixed","top":0});
                        $(".main").css("margin-top",106);
                    }else{
                        $(".nav").css({"position":"static"});  
                        $(".main").css("margin-top",20);
                    }
                });
            });
        </script>
    </head>
    <body>
    <div class="header">
    	<div class="top">
        		<img src="img/top.png" />
    	</div>
    	
    	<div class="nav">
       	 <img src="img/nav.png" />
    	</div>
    	
    </div>
    <div class="main">
        <img src="img/main.png" />
    </div>
    </body>
    </html>    
    

     

       当我们滑动页面的时候,如果滑动的高度正好等于顶部视图高度时,我们就给nav个定位,将它固定在一个位置不变

        $(".nav").css({"position":"fixed","top":0});
  • 相关阅读:
    Redis 连接
    Redis 脚本
    Redis 事务
    Redis 发布订阅
    redis 字符串数据(string)
    Redis 键(key)
    Redis 命令
    Redis的五种数据类型
    java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory 解决方案
    在命令行中运行eclipse中创建的java项目
  • 原文地址:https://www.cnblogs.com/houjiie/p/6050836.html
Copyright © 2011-2022 走看看