<!doctype html> <html> <head> <meta charset="utf-8"> <title>透渐变导航</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { padding:0; margin:0; } body { margin-top:40px; } #header { height:40px; line-height:40px; position:fixed; width:100%; top:0px; border-bottom:1px solid red; color:#000; } #main { height:20px; color:#000; } #header ul li { float:left; width:100%; text-align:center; list-style:none; } #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-size:3em; color:white; margin:10px 0px 20px 0px; } .home-desc { 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:1px solid black; } #mainMenuBar li { display:inline-block; color:black; margin-left:30px; font-size:1.2em; 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:40px; } .home { background:#d7c4b4; } </style> </head> <body> <header class="home"> <h1>我是标题</h1> <div class="">我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容我是标题下的内容</div> </header> <div id="header"> <ul> <li>我是渐变导航</li> </ul> </div> <div id="main">向下滚动查看效果</div> <div class="" style="width:800px;height:300px;background: blue;"></div> <div id="mainMenuBarAnchor"></div> <div class="size" id="mainMenuBar">向下滚动查看效果--我固定了</div> <div class="" style="height:2000px;"></div> <script> $(window).bind("scroll", function() { var $header = $("#header"); var t = 200, m = Math.min(document.documentElement.scrollTop || document.body.scrollTop, t) / t; $header.css("background", "rgba(254, 192, 213, " + m + ")"); }); </script> <script> $(document).ready(function() { var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); $window.scroll(function() { //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置 var window_top = $window.scrollTop(); //javascript用offsetTop();jquery用offset().top; var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); }); </script> <script> $(document).ready(function() { var $window = $(window), $mainMenuBar = $('#mainMenuBar'), $mainMenuBarAnchor = $('#mainMenuBarAnchor'); $window.scroll(function() { //scrollTop()方法返回或设置匹配元素的滚动条的垂直位置 var window_top = $window.scrollTop(); //javascript用offsetTop();jquery用offset().top; var div_top = $mainMenuBarAnchor.offset().top; if (window_top > div_top) { $mainMenuBar.addClass('stick'); $mainMenuBarAnchor.height($mainMenuBar.height()); } else { $mainMenuBar.removeClass('stick'); $mainMenuBarAnchor.height(0); } }); }); </script> </body> </html>
