วิธีสร้าง Sticky Element ใน HTML

บล็อกนี้จะกล่าวถึงคุณสมบัติตำแหน่ง CSS และวิธีการสร้างองค์ประกอบที่เหนียวใน HTML

คุณสมบัติตำแหน่ง CSS คืออะไร

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

ไวยากรณ์

ไวยากรณ์ที่ระบุข้างต้นแสดงว่าคุณสมบัติตำแหน่งมีค่าต่างกัน สามารถกำหนดได้ตามนั้น

ตอนนี้ มาดูขั้นตอนการสร้างองค์ประกอบแบบติดหนึบใน HTML กัน

ตำแหน่ง CSS คืออะไร: เหนียว

องค์ประกอบ HTML ที่มี ' เหนียว ” ตำแหน่งมีตำแหน่งสัมพัทธ์จนกว่าจะถึงจุดหนึ่งแล้วทำหน้าที่เหมือนองค์ประกอบที่เหนียว

มาดูตัวอย่างง่ายๆ เพื่อทำความเข้าใจแนวคิดของ CSS Sticky Position

ตัวอย่าง: วิธีสร้างองค์ประกอบที่เหนียวใน HTML
ในไฟล์ HTML เพิ่ม

สำหรับหัวข้อ

สำหรับย่อหน้า และ

โดยมีชื่อคลาสว่า “ เหนียว '. จากนั้นเพิ่มแท็ก

ที่มีรายการสั่งซื้อที่ซ้อนกัน

กับรายการ

1. บันทึก : เราได้ทำรายการยาวเพื่อให้เมื่อเลื่อนหน้าของเรา คุณสามารถสังเกตพฤติกรรมขององค์ประกอบที่เหนียว

   HTML

   < ชั่วโมง2 > Sticky Notes: ดูผลขององค์ประกอบ Sticky < / ชั่วโมง2 >
   < หน้า > ตำแหน่ง: เหนียว < / หน้า >
   < แผนก ระดับ = 'เหนียว' > นี่คือรายการสิ่งที่ต้องทำของฉัน! < / แผนก >
   < หน้า >
   < เก่า >
   < นั่น > ผู้จัดการการโทร < / นั่น >
   < นั่น > ประชุมกับพนักงาน < / นั่น >
   < นั่น > ส่งรายงาน < / นั่น >
   < นั่น > ไปหาหมอ < / นั่น >
   < นั่น > จองตั๋วเครื่องบิน < / นั่น >
   < นั่น > ไปเดินเล่น. < / นั่น >
   < นั่น > ไปซื้อของชำ < / นั่น >
   < นั่น > ดูโทรทัศน์ < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < นั่น > ข้อความบางส่วน < / นั่น >
   < / เก่า >
   < / หน้า >

   ต่อไป เราจะใส่สไตล์ให้กับ div ชื่อ Sticky:

   • ที่นี่, ' .เหนียว ” หมายถึงคลาสที่ต้องใช้คุณสมบัติสไตล์
   • ภายในวงเล็บปีกกา เราจะกำหนด “ ตำแหน่ง ” มูลค่าทรัพย์สินเป็น “ เหนียว '.
   • “ สูงสุด ” ตั้งเป็น “ 0 '.
   • “ สีพื้นหลัง ' เป็น ' #00154ฉ '.
   • ให้บ้าง” การขยายความ ” ไปยัง div โดยกำหนดค่าเป็น “ 40px '.
   • “ ขนาดตัวอักษร ' เช่น ' 30px '.
   • “ สี ” ของแบบอักษรถูกกำหนดเป็น “ สีขาว '.

   ซีเอสเอส

   .เหนียว {
   ตำแหน่ง : เหนียว ;
   สูงสุด : 0 ;
   สีพื้นหลัง : #00154ฉ ;
   การขยายความ : 40px ;
   ขนาดตัวอักษร : 30px ;
   สี : สีขาว ;
   }

   บันทึกไฟล์ HTML และเปิดในเบราว์เซอร์เพื่อดูผลลัพธ์:

   

   เคล็ดลับโบนัส

   โดยใช้ “ hsla() ” วิธีการ คุณสามารถตั้งค่าพื้นหลังโปร่งใสสำหรับองค์ประกอบที่เพิ่มเข้ามาได้ดังนี้:

   พื้นหลัง - สี : ฮสลา ( 0 , 100 %, 90 %, 0.8 ) ;

   เอาต์พุต

   

   นี่คือวิธีที่องค์ประกอบยึดติดกับตำแหน่งเฉพาะโดยการตั้งค่า CSS “ ตำแหน่ง ” มูลค่าทรัพย์สินเป็น “ เหนียว '.

   บทสรุป

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