[WP] ถ้าต้องการให้เปลี่ยน พื้นหลัง navigation bar เมื่อ scroll

[click2online]

ถ้าต้องการให้เปลี่ยน สีพื้นหลัง navigation bar เมื่อ user  ทำการ scroll ลง

แบบนี้ http://demo.themegrill.com/himalayas/

ต้องทำยังไงครับผม มีโค้ดประมานไหน  มือใหม่ครับ TT

[darkzard]

เรียกว่า sticky header jquery ครับ ลองหาใน google ดูครับ เขียนไม่เป็น แต่ก็หาไม่ยาก

แต่ถ้าจะเอาเหมือนตัวอย่าง หาในเว็บที่เอามาให้ดูได้เลย

กดเซฟจาก browser ลงเครื่องก็เปิดมาส่องดูโค้ดเลย
เปิด Notepad++ หรือโปรแกรมอะไรก็ได้ที่มีฟังก์ชั่น Find in Files...
จากนั้นก็ ค้นหาคำว่า stick ก็จะเจอโค้ดเองครับ มีทั้ง js ทั้ง css ครบ
ส่วนโค้ด html ก็แกะเอาจากไฟล์ html ได้ครับ

[BakKheab]

หากอยากเขียนเอง ก็ลอง เอาโค้ดที่ผมลองเขียนไปประยุกต์ดูนะครับ

<style type="text/css">
body{
   margin:0;padding:0;
   min-height:2000px;
}
nav{
   position:absolute;
   top:0;
   width:100%;
   height:100px;
   background-color:blue;
}
.fixed{
   position:fixed;
   background-color:red;
}
</style>

<nav id="nav"></nav>

<script type="text/javascript">
function fixed(){
   var nav = document.getElementById("nav");
   var body = document.getElementById("body");
      if(window.pageYOffset>100){ /* เมื่อ Scroll ห่างจากด้านบน 100px */
         nav.className="fixed"; /* ให้เพิ่มคลาส fixed ให้กับ ไอดี nav */
      }else{ /* หากไม่อยู่ในเงื่อนไข */
         nav.className=""; /* ลบคลาส fixed ออกจาก ไอดี nav โดย set คลาส ให้เป็นค่าว่าง*/
      }
};
window.onscroll = fixed;
</script>

[qawe89]

เข้ามาฟังด้วยครับ 

[adjobb]

หากอยากเขียนเอง ก็ลอง เอาโค้ดที่ผมลองเขียนไปประยุกต์ดูนะครับ

<style type="text/css">
body{
   margin:0;padding:0;
   min-height:2000px;
}
nav{
   position:absolute;
   top:0;
   width:100%;
   height:100px;
   background-color:blue;
}
.fixed{
   position:fixed;
   background-color:red;
}
</style>

<nav id="nav"></nav>

<script type="text/javascript">
function fixed(){
   var nav = document.getElementById("nav");
   var body = document.getElementById("body");
      if(window.pageYOffset>100){ /* เมื่อ Scroll ห่างจากด้านบน 100px */
         nav.className="fixed"; /* ให้เพิ่มคลาส fixed ให้กับ ไอดี nav */
      }else{ /* หากไม่อยู่ในเงื่อนไข */
         nav.className=""; /* ลบคลาส fixed ออกจาก ไอดี nav โดย set คลาส ให้เป็นค่าว่าง*/
      }
};
window.onscroll = fixed;
</script>

  1 ครับ แจ่มเลย

[click2online]

ขอบคุณทุกท่านมากๆครับ