Code is as follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> jquery floating navigation bar </title> <br/> <SCRIPT type =" text/JavaScript "src =" http://www.cndns.com/Scripts/jquery.js "> </SCRIPT> <br/> <style type = "Tex T/CSS "> <br/>/* floating navigation bar begin */<br/> # floatmenu <br/> {<br/> padding-top: 5px; <br/> Background: URL (http://www.cndns.com/cn/gdomain/images/quickmenu.gif) No-Repeat; <br/> border: 1px solid # dcdcdc; <br/> position: absolute; <br/> top: 250px; <br/> left: 5px; <br/> margin-left: 0px; <br/> width: 86px; <br/>}< br/> # floatmenu ul <br/>{< br/> margin-left: 0px; <br/> background-color: white; <br/> list-S Tyle-type: none; <br/> padding: 10px <br/>}< br/> # floatmenu ul Li a <br/>{< br/> display: block; <br/> text-Decoration: none; <br/> color: #000; </P> <p >}< br/> # floatmenu ul Li: hover <br/> {<br/> color: # FFF; <br/> background-color: # ff8000; <br/>}< br/> # floatmenu ul. menu1 Li A: hover <br/>{< br/> border-color: # 09f; <br/>}< br/>/* floating navigation bar end */<br/> </style> <br/> </pead> </P> <p> <body> <br/> <Div id = "fl Oatmenu "> <br/> <ul class =" menu1 "> <br/> <li> <a href =" # "onclick =" Return false; "> Home </a> </LI> <br/> <li> <a href =" # "onclick =" Return false; "> about us </a> </LI> <br/> <li> <a href =" # "onclick =" Return false; "> product </a> </LI> <br/> <li> <a href =" # "onclick =" Return false; "> contact </a> </LI> <br/> </ul> <br/> </div> </P> <p> <br/> <br /> <br /> <br/> <Br/> <br/> br/> <br/> br/> <br/> br/> <br/> br/> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> // <! [CDATA [<br/> var name = "# floatmenu"; <br/> var menuyloc = NULL; <br/> $ (document ). ready (function () {<br/> menuyloc = parseint(development (name).css ("TOP "). substring (0, watermark (name).css ("TOP "). indexof ("PX") <br/> $ (window ). scroll (function () {<br/> offset = menuyloc + $ (document ). scrolltop () + "PX"; <br/> $ (name ). animate ({top: Offset },{ Duration: 500, queue: false}); <br/>}); <br/> }); <br/> //]> <br/> </SCRIPT> <br/> </body> <br/> </ptml>
[Ctrl + A select all prompt: you can modify part of the code first, then click to run the Code]
