<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title> <style> html, body { margin: 0; padding: 0; } div { text-align: center; } #wrapper { width: 100%; overflow: hidden; margin: 0 auto; } #wrapper #header { background-color: #ffff00; color: #bbb; height: 100px; } #wrapper #menu { background-color: #bbb; height: 50px; color: #fff; width: 800px; } #wrapper #contents { background-color: #eee; height: 1000px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var menupos = $("#menu").offset().top; $(window).scroll(function() { if ($(window).scrollTop() >= menupos) { $("#menu").css("position", "fixed"); $("#menu").css("top", "0"); } else { $("#menu").css("position", "relative"); $("#menu").css("top", ""); } }); }); </script> </head> <body> <div id="wrapper"> <div id="header">header</div> <div id="menu">menu</div> <div id="contents"> contents </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> |