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

เผยแพร่แล้ว: 2018-10-14

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

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

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

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

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

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

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

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

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

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

.navbar-fixed-top {

position: fixed;

right: 0;

left: 0;

z-index: 999;

}

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

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

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

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

body {

padding-top: 75px;

}

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

ไม่ได้ขายบนส่วนหัวของไซต์ที่เหนียวเหนอะหนะ? เรียนรู้วิธีเพิ่มปุ่ม back-to-top แบบติดหนึบในเว็บไซต์ของคุณ

ทำสกุชชี่หัวเหนียว

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

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

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

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

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

.navbar-fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f6f6f6;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}

.navbar-fixed-top.cbp-af-header-shrink {
height: 75px;
}

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

function scrollPage() {
var sy = scrollY();
if ( sy &amp;amp;amp;amp;amp;gt;= changeHeaderOn ) {
classie.add( header, 'cbp-af-header-shrink' );
}
else {
classie.remove( header, 'cbp-af-header-shrink' );
}
didScroll = false;
}

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

ตัวเลือกการวางตำแหน่ง CSS แบบติดหนึบ

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

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

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

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

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

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

.navbar-fixed-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

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

สถานการณ์น้ำล้นที่ต้องระวัง

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

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

รองรับเบราว์เซอร์จำกัด

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

@supports(position:sticky){
  .header{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

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

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

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

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

บทความนี้เผยแพร่ครั้งแรกเมื่อวันที่ 2 กุมภาพันธ์ 2016 อัปเดตล่าสุดเมื่อวันที่ 14 ตุลาคม 2018