导航头部固定jQuery代码

 

鼠标滑动，nav固定效果~代码如下：

 

JQ:

<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript">
    $(function(){
        var headerHeight=$(".header").height()+10;  //获取头部高度
        var nav=$(".show");  //或许需要显示的div
        $(window).scroll(function(){  //绑定一个滚动事件
            if($(this).scrollTop()>headerHeight){ //如果当前的滚动的高度>头部高度
                nav.css("display","block");  //就显示nav div
                }else{         //否则 隐藏         可以是css display 也可以addClass（） 两种都可以
                nav.css("display","none");
                }
        })
    });

</script>

 

 

Html和CSS

<style type="text/CSS">
*{ margin:0; padding:0;}
body{ _background-attachment:fixed; _background-image:url(about:blank);}/*实现IE6不兼容fixed闪动问题*/
.header{ width:1000px; height:150px; margin:0 auto; background:red;}
.nav{ height:30px; width:1000px; margin:0 auto; background:#ccc; margin-top:20px;}
.nav ul li{ list-style:none; float:left; display:block; padding:0 20px; line-height:30px;}
.show{ display:none; width:1000px; margin-left:13%; position:fixed; _position:absolute;_top:0; top:0; left:0; background:#ccc;background: rgba(255, 255, 255, 0.7) !important; /* IE无效，FF有效 */filter: alpha(opacity=70);_position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:999;  }
.show ul li{ list-style:none; float:left; display:block; padding:0 20px; line-height:30px;}
</style>

 

 

<div class="header"></div>
<div class="nav">
    <ul>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
    </ul>
</div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>

<div class="show">
    <ul>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
        <li>fsdfsd</li>
    </ul>
</div>

 

转载于:https://www.cnblogs.com/qdmaomao/p/4581532.html