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

วันนี้มาแบ่งปันการเพิ่มลูกเล่นให้กับเมนูด้านบนของเว็บกัน ^^ จริงๆ แล้วก็ชอบเป็นการส่วนตัวด้วยแหละ เพราะถ้าเราใช้ 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 ไว้ด้วยจะได้เอามาเปรียบเทียบได้ว่าขึ้นหรือลง ทำให้การทำงานตรงตามที่คิดไว้หน่อย ^^