<!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: 2000px; color: #000; } #header ul li { float: left; width: 100%; text-align: center; list-style: none; } </style> </head> <body> <div id="header"> <ul> <li>我是渐变导航</li> </ul> </div> <div id="main">向下滚动查看效果</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> </body> </html>
