วิธีสร้างส่วนหัวของเว็บไซต์ Sticky

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

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

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

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

อะไรทำให้มันเหนียว?

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

หมายเหตุ: อย่าลองทำสิ่งนี้บนไซต์สดของคุณ

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

เราจะทำให้การนำทางอยู่ในที่เดียวได้อย่างไร

การทำให้การนำทางเหนียวนั้นไม่ใช่เรื่องง่าย มันเพิ่งเสร็จสิ้นด้วยสไตล์ CSS โดยทั่วไปจะมีลักษณะดังนี้:

 [css]

.navbar-fixed-top {

ตำแหน่ง: คงที่;

ขวา: 0;

ซ้าย: 0;

ดัชนี z: 999;

}

[/css]

ไม่ว่าหน้าของคุณจะยาวแค่ไหน หรือเลื่อนขึ้นลงกี่ครั้งก็ตาม nav ก็จะ "ค้าง" อยู่ที่ด้านบนสุดของหน้า มีการเพิ่มคลาสที่เรียกว่า .navbar-fixed-top ในการนำทางที่สร้างตำแหน่งสำหรับการนำทาง ฉันเพิ่มคลาสนี้ในแท็ก nav ตำแหน่งถูกตั้งค่าเป็นคงที่และการเพิ่มตำแหน่งซ้ายและขวาทำให้มั่นใจได้ว่าตำแหน่งนั้นถูกต้องและใช้พื้นที่เต็มความกว้างของหน้า

โปรดทราบว่าเมื่อใดก็ตามที่ใช้คลาสนี้ คลาสนี้จะสร้างตำแหน่งคงที่ขององค์ประกอบ เป็นไปได้มากว่าคลาสนี้จะใช้เพียงครั้งเดียว มิฉะนั้นจะมีองค์ประกอบหลายหน้าที่ทำงานในลักษณะเดียวกันในที่เดียวกัน สร้างความยุ่งเหยิง

การพิจารณาที่สำคัญอีกประการหนึ่งคือดัชนี z เนื่องจากเราต้องการให้มองเห็นการนำทางได้เสมอ เราจึงจำเป็นต้องตรวจสอบให้แน่ใจว่าองค์ประกอบอื่นไม่ซ้อนทับกัน เมื่อเราอ้างอิง z-index เรากำลังพูดถึงคุณสมบัติ CSS ที่กำหนดลำดับสแต็กขององค์ประกอบเฉพาะ องค์ประกอบที่มีลำดับสแต็กมากกว่าจะอยู่ข้างหน้าองค์ประกอบอื่นที่มีลำดับสแต็กต่ำกว่าเสมอ ค่า 999 เป็นตัวเลขจำนวนมาก ทำให้เป็นเดิมพันที่ปลอดภัยสำหรับการนำทาง

ปรับเนื้อหาของหน้า

เนื่องจากตอนนี้การนำทางอยู่ในตำแหน่งคงที่ การนำทางจะครอบคลุมเนื้อหาบางส่วนที่อยู่ด้านบนสุด มีวิธีแก้ไขง่ายๆ สำหรับสิ่งนี้ การเพิ่มช่องว่างด้านบนสุดของเนื้อหาจะดันหน้าลง ดังนั้นเนื้อหาที่อยู่ด้านบนจะไม่ครอบคลุมโดยส่วนหัวเมื่อผู้ใช้มาถึงหน้านั้น
คุณสามารถเพิ่มช่องว่างภายในเนื้อหาในไฟล์ CSS ของคุณ:

 [css]

ร่างกาย {

ช่องว่างภายในด้านบน: 75px;

}

[/css]

โปรดทราบว่าช่องว่างภายในของคุณอาจใหญ่ขึ้นหรือเล็กลงขึ้นอยู่กับความหนาของส่วนหัวคงที่

การทำ Squishy Header Sticky

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

การนำทางที่นุ่มนวลด้วยสคริปต์ AnimatedHeader

หากต้องการเพิ่มส่วนหัวแบบเคลื่อนไหวที่จะเปลี่ยนขนาดเมื่อเลื่อน มีวิธีที่ยอดเยี่ยมและน้ำหนักเบาในการทำให้การนำทางดูนิ่มนวล เรียกว่า AnimatedHeader มีใบอนุญาต MIT ดังนั้นจึงสามารถใช้สำหรับโครงการส่วนบุคคลหรือเชิงพาณิชย์ หากต้องการรับไฟล์เหล่านี้ โปรดดู AnimatedHeader บน GitHub

CSS พื้นฐานสำหรับการนำทาง

มาดูรูปแบบ CSS ที่สำคัญสองแบบ อันแรกอาจดูคุ้นๆ สำหรับคุณ นั่นคือ .navbar-fixed-top ซึ่งระบุความสูง ความกว้าง และตำแหน่งคงที่สำหรับการนำทางแบบติดหนึบ ด้านล่าง คุณจะเห็นว่ามีการเพิ่มคลาสอื่นที่ระบุความสูง 75px นี่ขนาด "สลบ"

 [css]

.navbar-fixed-top {
ตำแหน่ง: คงที่;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
พื้นหลัง: #f6f6f6;
ดัชนี z: 999;
ความสูง: 90px;
ล้น: ซ่อน;
-webkit-transition: ความสูง 0.3 วินาที;
-moz-transition: ความสูง 0.3 วินาที;
การเปลี่ยนแปลง: ความสูง 0.3 วินาที;
}

.navbar-fixed-top.cbp-af-header-shrink {
ความสูง: 75px;
}

[/css]

หากต้องการเปลี่ยนขนาด จะใช้ JavaScript เพื่อเพิ่มคลาสของ .cpb-af-header-shrink มาดูส่วนของสคริปต์ที่ทำให้สิ่งนี้เกิดขึ้น:

 [จาวาสคริปต์]

ฟังก์ชั่น scrollPage () {
var sy = scrollY();
ถ้า ( sy >= changeHeaderOn ) {
classie.add (ส่วนหัว 'cbp-af-header-shrink');
}
อื่น {
classie.remove ( ส่วนหัว 'cbp-af-header-shrink' );
}
didScroll = เท็จ;
}

[/จาวาสคริปต์]

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

ตัวเลือกการวางตำแหน่ง CSS Sticky

นอกจากนี้ยังมีตัวเลือกที่อาจยุ่งยากน้อยกว่า ขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ที่คุณออกแบบ position: sticky; ทำให้การสร้างส่วนหัวติดง่ายมาก การสนับสนุนเบราว์เซอร์นั้นไม่น่ากลัว แต่ก็ไม่ครอบคลุมทั่วโลกเช่นกัน เมื่อคุณประกาศติดหนึบ อาจใช้คำนำหน้า ตรวจสอบ ฉันสามารถใช้ สำหรับรายละเอียดเพิ่มเติม

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

องค์ประกอบจะถือว่าอยู่ในตำแหน่งสัมพัทธ์จนกว่าจะถึงจุดหนึ่งและจากนั้นจะ "คงที่" จุดนี้ประกาศโดยใช้ CSS “จุด” นั้นเป็นพื้นฐานเมื่อคุณระบุบน ล่าง ซ้าย หรือขวา เช่นเดียวกับที่คุณทำกับตำแหน่งสัมบูรณ์ คุณต้องระบุเพื่อให้องค์ประกอบมีสิ่งที่จะ "ยึดติด"

ใช้ตำแหน่ง: เหนียว

มันค่อนข้างง่ายที่จะใช้ การประกาศ CSS สองสามรายการและฉันก็สามารถมีส่วนหัวที่เหนียวได้ ต่อไปนี้เป็นขั้นตอนง่ายๆ สามขั้นตอน:

1. ค้นหาสไตล์ที่ถูกต้องเพื่อให้คุณสามารถประกาศองค์ประกอบว่าติดหนึบได้โดยใช้ position:sticky; (อย่าลืมคำนำหน้าเบราว์เซอร์ เช่น position: -webkit-sticky; )
2. เลือก "ติดขอบ" (บน ขวา ล่าง หรือซ้าย) สำหรับรายการที่จะ "ติด"
3. ประกาศระยะห่างจาก “ขอบติดหนึบ” เช่น 10px สำหรับส่วนหัวที่จะติดหนึบเมื่ออยู่ห่างจากพื้นที่เลื่อน 10px

 [css]

.navbar-fixed-top {
  ตำแหน่ง: -webkit-เหนียว;
  ตำแหน่ง: เหนียว;
  ด้านบน: 0;
}

[/css] 

ฉันไม่ต้องการให้มีช่องว่างระหว่างส่วนหัวแบบติดหนึบและวิวพอร์ต ดังนั้นจึงเป็น 0 พิกเซลจากด้านบน คุณสามารถดูตัวอย่างนี้ได้ที่ Codepen

ระวังสถานการณ์ล้นเหนียวเหล่านี้

ความเข้ากันได้ล้น

มันยอดเยี่ยม แต่ก็ไม่สมบูรณ์แบบ มีข้อจำกัดบางประการ บางครั้งการล้นอาจคาดเดาไม่ได้เล็กน้อย เป็นการดีที่สุดที่จะหลีกเลี่ยงการโอเวอร์โฟลว์บางประเภทในองค์ประกอบหลักด้วยสิ่งที่ต้องการ position: sticky อาจมีปัญหากับโอเวอร์โฟลว์อัตโนมัติ เลื่อน หรือซ่อน

การสนับสนุนเบราว์เซอร์จำกัด

การสนับสนุนเบราว์เซอร์มีจำกัด ดังนั้นการใช้กฎ supports เพื่อตรวจสอบว่าเบราว์เซอร์ปัจจุบันรองรับการวางตำแหน่งแบบติดหนึบหรือไม่จึงเป็นทางเลือกหนึ่ง ดูเหมือนว่า:

 [css]

@supports(ตำแหน่ง:เหนียว){
  .หัวข้อ{
    ตำแหน่ง: -webkit-เหนียว;
    ตำแหน่ง: เหนียว;
    ด้านบน: 0;
  }
}

[/css]

สิ่งสำคัญคือต้องพิจารณาว่าการวางตำแหน่งแบบติดหนึบนั้นจำเป็นอย่างยิ่งหรือไม่ หากเป็นเช่นนั้น สามารถใช้แนวทางการกำหนดตำแหน่งคงที่ได้ หากไม่จำเป็นจริงๆ หรือไม่รองรับเบราว์เซอร์ แนวทางที่เหนียวแน่นจะนำไปใช้ได้ง่ายกว่า

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

อย่าลองทำสิ่งนี้บนไซต์สดของคุณ

สร้างส่วนหัวของเว็บไซต์ที่เหนียวสำหรับเว็บไซต์ที่โฮสต์ WP Engine ของคุณบน Local! เรียนรู้เพิ่มเติมและดาวน์โหลดฟรีที่นี่!