悬浮固定菜单
重要元素：
display: block、inline、inline-block, block 单独一行，可设宽、高；inline 和其它元素在一行，无法设宽高；inline-block 可与其它元素在一行，可设宽高
offsetTop 是指元素距离顶部的距离，而 scrollTop是指右侧滚动条距离顶部的距离
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css" media="screen"> #warp { height: 2000px; width:1000px; margin-left:auto; margin-right:auto; text-align: center; } #header { height: 150px; } #nav { background-color: #3B0707; /*text-align: center;*/ position: relative; /*height: 50px;*/ /*margin: auto;*/ padding:10px; width:1000px; top:0; } #nav a{ display:inline-block; color: #FCF4F4; width:15%; } </style> <script type="text/javascript"> window.onload= function(){ var obj = document.getElementById("nav"); var objHeight = obj.offsetTop; window.onscroll = function(){ var obj = document.getElementById("nav"); var scrollTop = document.body.scrollTop; if(objHeight>scrollTop) { obj.style.position = "relative"; } else { obj.style.position = "fixed"; } } } </script> </head> <body id="warp"> <div id="header"> </div> <div id="nav"> <a href="">页面设计</a> <a href="">合作伙伴</a> <a href="">渠道合作</a> <a href="">媒体交流</a> </div> </body> </html>
另一种方法：
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 == 静态方法
jQuery.fn.extend(object);给jQuery对象添加方法。 == 类成员函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>test</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script> <style type="text/css"> .ndiv{ width:900px; height:100px; border:1px solid #ccc;background: #f1f1f1;} .fix-div{ position:fixed; top:0px;} p {line-height: 50px; } </style> </head> <body> <div style="margin: 100 auto; height: 200px;"></div> <div id="mydiv" class="ndiv" >di222v</div> <p>悬浮经典实例请参考：米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p> <p>悬浮经典实例请参考： 米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p> <p>悬浮经典实例请参考： 米扑代理</p> <p>米扑代理价格表实例： </p> <p><a href="http://proxy.mimvp.com/price.php">http://proxy.mimvp.com/price.php</a></p> <div style="height:2700px;"></div> <script type="text/javascript"> $.fn.fixedDiv = function(actCls){ var pos = 0, that = $(this), topVal; if(that.length > 0){ topVal = that.offset().top; } function fix(){ pos = $(document).scrollTop(); if (pos > topVal) { that.addClass(actCls); // if (!window.XMLHttpRequest) { // that.css({ // position: 'absolute', // top : pos // }); // } } else { that.removeClass(actCls); // if (!window.XMLHttpRequest) { // that.css({ // position: 'static', // top : 'auto' // }); // } } } $(window).scroll(fix); } $('#mydiv').fixedDiv('fix-div'); </script> </body> </html> <style></style> <script></script>
another way :
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- js引用包 --> <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}#wrapper { width: 100%; position: relative; } #container { width: 100%; position: relative; background: #303030; z-index: -5; } header.home { max-width: 760px; position: relative; margin: 0 auto; text-align: center; } header.home img { max-width: 300px; margin: 0 auto; position: relative; text-align: center; } .home-title { font-family: "coquette"; font-size: 3em; color: white; margin: 10px 0px 20px 0px; } .home-desc { font-family: "coquette"; font-size: 1.8em; color: white; margin: 0px 0px 20px 0px; line-height: 1.3em; } #top_intro { width: 100%; } .le-background { position: fixed; top: 0px; left: 0; bottom: 0; right: 0; width: 100%; z-index: -2; opacity: 0.6; background: #303030; background-size: cover !important; background-position: center; background-repeat: no-repeat no-repeat; } .blurred { opacity: 0; } #mainMenuBar { width: 100%; background-color: white; z-index: 100; } #mainMenuBar ul { margin: 0 auto; text-align: center; position: relative; padding: 20px; border-bottom: 1px solid black; } #mainMenuBar li { display: inline-block; color: black; margin-left: 30px; font-size: 1.2em; font-family: "proxima-nova"; font-weight: 100; } #content { width: 100%; position: relative; background-color: white; padding-top: 20px; } #content p { font-size: 1.2em; font-family: "proxima-nova"; font-weight: 100; max-width: 640px; margin: 0 auto; line-height: 1.4em; padding: 10px 0px 10px 0px; } .stick { position: fixed; top: 0; } </style> </head> <body> <div id="wrapper"> <div id="container"> <div id="top_intro"> <div id="bl-img"> <div class="le-background"></div> <div class="le-background blurred"></div> </div> <header class="home"> <div class="logo"><img src="http://wizardwiz.co.uk/ww/logo_w_trans.png" /></div> <h1 class="home-title">Waney Wood</h1> <h2 class="home-desc">WaneyWood produces a range of distinctive home products all handcrafted with wood, from our workshop in Devon, England and all timber is purchased locally from sustainable sources</h2> </header> </div> <div id="mainMenuBarAnchor"></div> <div id="mainMenuBar"> <ul> <li>Home</li> <li>Shop</li> <li>Blog</li> <li>About Us</li> <li>Contact</li> </ul> </div> <div id="content"> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> <p> Lorem ipsum dolor sit amet, tamquam equidem adipisci at his, eu vix purto feugiat dignissim. At vix soleat debitis, eruditi dolorem interpretaris te per. Eam antiopam elaboraret ad, at quis argumentum dissentiunt eam. Qui dissentiunt complectitur et, ad vix minim ignota. Ei timeam deserunt forensibus eum, doming fabellas qui te, dicta errem corrumpit ei pro. Assentior adversarium vis no.</p> <p>Ex vel albucius iracundia, errem ancillae at mei. Invidunt facilisi at eum, dicit accusamus duo ne. Doming antiopam suscipiantur eu usu, ea falli aeque usu. Pro minim postea everti in, pro at aeterno integre delenit. Mea verear definitionem cu.</p> <p>Qui no ornatus expetenda, at usu assum discere deterruisset, quis antiopam recteque te pro. At eum ferri dignissim. Putent meliore ne ius, ubique facilisi eos ad. Mel at eius tation inermis, vide veniam euismod vix ad. Sed ut reque soluta lucilius, pri bonorum ceteros ea, vix cu nonumy facilis. Sed partem eruditi omittam an.</p> <p>Posidonium cotidieque referrentur at vel, ut periculis consetetur interpretaris sit. Mei melius albucius no, duo id impetus comprehensam, causae blandit pericula ne has. Nec suas solet detracto an. Suscipit delicatissimi ad nam, at eos fabellas necessitatibus. Ex pri legendos persecuti, id sit latine saperet, timeam deseruisse et nec. Sit ne adhuc accusamus.</p> <p>Vel ei volumus minimum evertitur, vis case vocibus accusam ne, copiosae phaedrum percipitur no sea. His meis interpretaris in, odio iriure facilis sed in. Cum recusabo sapientem iracundia ex, constituto consetetur usu in. Eum noluisse voluptua eu, ea vim tation postulant. Sit ut sale singulis, te mea tritani delenit reprehendunt. Consul eleifend efficiendi vel ad. Ut mea reque concludaturque, duis noster ut has, nam stet periculis ullamcorper no.</p> </div> </div> </div> </body> <script style='text/javascript'> $(document).ready(function() { // Cache selectors for faster performance. var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); // Run this on scroll events. $window.scroll(function() { var window_top = $window.scrollTop(); var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { // Make the div sticky. $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { // Unstick the div. $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); }); </script> </html>
下载链接：https://files.cnblogs.com/files/hzijone/mimvp_navi_demo.rar
