<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<html> <head> <style = "text/css" > // Tab CSS body { height: 6000px; font-family: Helvetica, Arial; } #top-menu { position: fixed; z-index: 1; background: white; left: 0; right: 0; top: 0; } #top-menu li { float: left; } #top-menu a { display: block; padding: 5px 25px 7px 25px; -webkit-transition: 1s all ease; -moz-transition: 1s all ease; transition: 1s all ease; border-top: 3px solid white; color: #666; text-decoration: none; } #top-menu a:hover { color: #000; } #top-menu li.active a { border-top: 3px solid #333; color: #333; font-weight: bold; } #foo { position: absolute; top: 400px; } #bar { position: absolute; top: 800px; } #baz { position: absolute; top: 1200px; } </style> <script> //Tab Ajax&jQuery // Cache selectors var lastId, topMenu = $("#top-menu"), topMenuHeight = topMenu.outerHeight()+15, // All list items menuItems = topMenu.find("a"), // Anchors corresponding to menu items scrollItems = menuItems.map(function(){ var item = $($(this).attr("href")); if (item.length) { return item; } }); // Bind click handler to menu items // so we can get a fancy scroll animation menuItems.click(function(e){ var href = $(this).attr("href"), offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; $('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href=#"+id+"]").parent().addClass("active"); } }); </script> </head> <body> <ul id="top-menu"> <li class="active"> <a href="#">Top</a> </li> <li> <a href="#foo">Foo</a> </li> <li> <a href="#bar">Bar</a> </li> <li> <a href="#baz">Baz</a> </li> </ul> <a id="foo">Foo</a> <a id="bar">Bar</a> <a id="baz">Baz</a> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
