Mouse slide, nav fixed effect ~ code as follows:
JQ:
<script type= "Text/javascript" src= "Jquery-1.7.2.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var headerheight=$ (". Header"). Height () +10; height
var nav=$ (". Show"); Perhaps the div that needs to be displayed
$ (window). Scroll (function () {//bind a scroll event
if ($ (this). ScrollTop () >headerheight) {//If the current scrolling height > head height
NAV.CSS ("Display", "block"); The nav div is displayed
}else{//Otherwise hidden can be CSS display can also addclass () both can
NAV.CSS ("Display", "none");
}
})
});
</script>
HTML and CSS
<style type= "Text/css" >
*{margin:0; padding:0;}
body{_background-attachment:fixed; _background-image:url (About:blank);} /* Implement IE6 incompatible fixed flashing problem */
. 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 invalid, ff effective */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>
Navigation Head fixed jquery code