Home เขียนโปรแกรม เพิ่มลูกเล่นให้กับเมนูบาร์ด้านบนของ imooh.com

เพิ่มลูกเล่นให้กับเมนูบาร์ด้านบนของ imooh.com

by gigkokman

วันนี้มาแบ่งปันการเพิ่มลูกเล่นให้กับเมนูด้านบนของเว็บกัน ^^ จริงๆ แล้วก็ชอบเป็นการส่วนตัวด้วยแหละ เพราะถ้าเราใช้ position: fixed ให้มันอยู่ด้านบนเลยแล้วมันดูขัดๆ ตา ก็อย่างว่าชอบใครชอบมันเนาะ เผื่อมีเพือนๆ ชอบเหมือนกัน 

เทคนิคที่ใช้ก็จะมีการใช้ transition, transform และนำเอา javascript มาช่วยด้วย ลักษณะของลูกเล่นนี้ก็คือ ตอนที่เราเลื่อน scroll ลงก็ให้เมนูค่อยๆ ลอยหายขึ้นไปด้านบน แล้วพอเลื่อน scroll ขึ้น ก็ให้เมนูค่อยๆ ลอยลงมาครับ

มาดูโครงสร้าง HTML ของเมนูกันว่าเป็นยังไง ตอนนี้ก็มีแค่ลิงค์เดียวกดไปที่หน้าแรก ^^

 <nav> <a href="/" title="IMOOH.COM">IMOOH.COM</a> </nav> 

ส่วน CSS ของเมนูก็จะประมาณนี้ครับ

nav { height: 45px; width: 100%; background: rgba(255, 255, 255, 0.97); box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); position: fixed; font-weight: bold; top: 0px; left: 0px; -ms-transition: 1s; -webkit-transition: 1s; transition: 1s; } .nav-hidden { -ms-transform: translateY(-45px); -webkit-transform: translateY(-45px); transform: translateY(-45px); } nav a { margin: 7px 10px 10px; color: #000; font-size: 1.5em; font-weight: bold; display: inline-block; }

transform ด้วย translateY บอกว่าให้แกน Y ขยับขึ้นไป 45px ซึ่งจะเท่ากับขนาดความสูงของ nav พอเราใส่ .nav-hidden เข้าไปให้ nav ก็จะทำให้ nav หายขึ้นไปด้านบนครับ
transition เอามาคุมความเร็วของเมนูตอนที่ลอยขึ้นไป ไม่ให้หายขึ้นไปเลยทันทีให้คนอ่านเห็นการเปลี่ยนแปลงด้วย ^^

จากนั้นก็ใช้ jquery มาช่วยในจังหวะที่มีการเลื่อน scroll ขึ้น-ลง

scrollIndex=0 $(window).scroll(function() { if(scrollIndex < window.scrollY) { $('nav').addClass('nav-hidden'); }else{ $('nav').removeClass('nav-hidden'); } scrollIndex = window.scrollY });

จริงๆ ตอนแรกใช้ toggleClass เลย ไม่มีการเก็บตำแหน่งของแกน Y ไว้อ้างอิง พอมีการเลื่อน scroll ทำให้มีการเพิ่มและลบคลาส .nav-hidden ตลอดเวลาไม่เห็นการเปลี่ยนแปลงคือเมนูลองอยู่นิ่งๆ ไม่หายไปไหน ก็เลยต้องมีการเก็บตำแหน่งล่าสุดของ scrollY ไว้ด้วยจะได้เอามาเปรียบเทียบได้ว่าขึ้นหรือลง ทำให้การทำงานตรงตามที่คิดไว้หน่อย ^^

You may also like