1 <!DOCTYPE HTML>2 <HTMLLang= "en -us">3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 <Linkrel= "stylesheet"type= "Text/css"href= "Css/base.css"Media= "All"/>7 <styletype= "Text/css">8 . Wrapper{width:1000px;Height:2000px;Margin-left:Auto;Margin-right:Auto;}9 . Header{Height:150px;}Ten #nav{padding:10px;position:relative;Top:0;background:Black;width:1000px;} One a{Display:Inline-block;margin:0 10px;*display:inline;Zoom:1;Color: White;} A </style> - </Head> - <Body> the <Divclass= "wrapper"> - <Divclass= "header"></Div> - <DivID= "NAV"> - <ahref="#">11111</a> + <ahref="#">22222</a> - <ahref="#">33333</a> + <ahref="#">44444</a> A <ahref="#">55555</a> at </Div> - </Div> - </Body> - </HTML> - <Scripttype= "Text/javascript"src= "Menufixed.js"></Script> - <Scripttype= "Text/javascript"> in window.onload= function(){ - menufixed ('nav'); to } + </Script>
Way One:
1 //JS Code2 3 functionmenufixed (ID) {4 varobj =document.getElementById (ID);5 var_getheight =Obj.offsettop;6 7Window.onscroll =function(){8 Changepos (id,_getheight);9 }Ten } One functionChangepos (id,height) { A varobj =document.getElementById (ID); - varscrolltop = Document.documentElement.scrollTop | |Document.body.scrollTop; - if(ScrollTop <height) { theobj.style.position = ' relative '; - //obj.style.position = ' fixed '; Here the fixed and relative depend on the div position you initially set - //obj.style.top = "200px"; -}Else{ +obj.style.position = ' fixed '; - //obj.style.position = ' fixed '; + //obj.style.top = "101px"; A } at } - -Window.onload=function() {menufixed ("DH");}//calling Functions
Way two:
1 //jquery Code2 3$(function () 4 {5 varIE6 =/msie 6/i.test (navigator.useragent)6, DV = $ (' #dh '), St;7Dv.attr (' Otop ', Dv.offset (). top);//store the distance from the top of the original distance8$ (window). Scroll (function()//scroll function, scrolling function9 {Tenst = Math.max (Document.body.scrollTop | |document.documentElement.scrollTop); One if(St >= parseint (dv.attr (' Otop ')))) A { - if(IE6) {//IE6 does not support the fixed property, so you can only do this by setting position to absolute and top -Dv.css ({position: ' absolute '), top:st}); the } - Else if(Dv.css (' position ')! = ' fixed ') -Dv.css ({' position ': ' Fixed ', top:0 }); - } + Else if(St < parseint (dv.attr (' Otop ')))) -Dv.css ({' position ': ' absolute ', top:500px}); + }); A});
Slide the navigation bar to the specified position fixed method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
