สร้างส่วนหัวที่ซ่อนอัตโนมัติที่มี Headroom.js

ซ่อนส่วนหัวอัตโนมัติ ได้รับความนิยมอย่างต่อเนื่องในการออกแบบเว็บมาระยะหนึ่งแล้ว บล็อกและนิตยสารออนไลน์จำนวนมากใช้ส่วนหัวเหนียว ให้ผู้ใช้มีส่วนร่วม และ ให้พวกเขาเข้าถึงการนำทางได้โดยตรง.

ขนาดกลางมี นิยามคุณสมบัตินี้ใหม่ ด้วยแนวคิดพื้นฐานที่ ซ่อนการนำทาง ในขณะที่ เลื่อนลง แต่ แสดงมัน ในขณะที่ เลื่อนขึ้น. แนวคิดนี้ได้กลายเป็น แนวโน้มความนิยมอย่างดุเดือด และตอนนี้คุณสามารถได้อย่างง่ายดาย ทำซ้ำ การใช้ Headroom.js.

Headroom.js คือ ฟรีไลบรารี JavaScript ของ vanilla โดยไม่มีการพึ่งพาหรือคุณลักษณะ API ที่มากเกินไป คุณเพียงแค่เพิ่มลงใน HTML กำหนดเป้าหมายส่วนหัวของหน้าแล้วปล่อยให้มันทำงาน.

Headroom ง่ายๆ เพิ่มและลบคลาส CSS ที่ทำให้เคลื่อนไหว เพื่อที่จะ แสดง / ซ่อนส่วนหัว ใช้ JavaScript เพื่อตรวจจับการเคลื่อนไหว.

คุณสามารถสร้างฟังก์ชั่นนี้ด้วยตัวเอง แต่ทำไมต้องกังวล? Headroom ผ่านการทดสอบแล้ว รองรับเบราว์เซอร์ที่สำคัญทั้งหมด. มันยัง เล่นได้ดีกับ jQuery หรือ Zepto หากคุณมีห้องสมุด JS ติดตั้งอยู่ในเว็บไซต์ของคุณ.

คุณจะพบ ตัวอย่างโค้ดจำนวนมาก ใน repo ของ GitHub แต่นี่คือ ตัวอย่างง่ายๆ เป้าหมาย #header ธาตุ:

 var myElement = document.querySelector ("# header"); // สร้างวัตถุ Headroom ผ่านในองค์ประกอบ #header var headroom = headroom ใหม่ (myElement); // เริ่มต้นห้องสมุด headroom.init (); 

ในนั้น() ฟังก์ชั่นมี ตัวเลือกมากมายในการปรับแต่ง. คุณสามารถปรับแต่งที่แตกต่างกัน คลาสขององค์ประกอบ, พร้อมกับที่แตกต่างกัน การเรียกกลับเหตุการณ์ ที่ที่คุณสามารถ ฝังฟังก์ชั่นของคุณเอง. ตัวอย่างเช่นหากคุณต้องการให้องค์ประกอบจางหายไปหลังจากเลิกตรึงคุณจะต้องใช้ onUnpin โทรกลับ.

ตัวเลือกเหล่านี้ล้วนแล้วแต่ แสดงรายการในหน้าปลั๊กอินหลัก, ลองตรวจสอบดูสิว่าคุณคิดอย่างไร ถ้าคุณต้องการที่จะเห็น Headroom in action ดูที่ปากกาด้านล่างที่มี โคลนเต็มของหน้าสาธิตหลัก.