วิธีการสร้าง CSS Sticky Footer
โดยปกติเราต้องการ JavaScript เพื่อ ดำเนินการผลการเลื่อน เกี่ยวข้องกับการกระทำของผู้ใช้ที่แตกต่างกันในหน้าเว็บ สคริปต์ทำงานของ การติดตามว่าการเลื่อนขึ้นหรือลงจะใช้เวลานานแค่ไหนในหน้า, และ ทริกเกอร์การกระทำ เมื่อถึงเกณฑ์ความสูง.
ไม่ใช่เรื่องเลวร้ายที่จะใช้ JavaScript ในการเลื่อนเอฟเฟกต์ ในความเป็นจริงมีกรณีที่ซับซ้อนมากขึ้น แก้ไม่ได้หากไม่มี JavaScript. อย่างไรก็ตามมี CSS แฮ็ก ที่สามารถแทนที่สคริปต์เหล่านี้ได้ตลอดเวลา.
โพสต์นี้จะแสดงให้คุณเห็นw เพื่อสร้างส่วนท้ายเปิดเผยผลบนหน้าเลื่อนโดยใช้ CSS. เราจะใช้สองกรณีใช้ในการสาธิตสิ่งนี้: หนึ่งกรณีสำหรับทั้งหน้า (ดูตัวอย่าง) และอีกหนึ่งองค์ประกอบสำหรับแต่ละหน้าเช่นบทความ.
เต็มหน้า
เราต้องสร้างส่วนท้ายที่ ปรากฏขึ้นจากใต้หน้า ในขณะที่ผู้ใช้เลื่อนลง นอกจากนี้เมื่อพวกเขาเลื่อนหน้าสำรองท้ายกระดาษที่จำเป็น ซ่อนเร้น ใต้หน้าอีกครั้ง.
เพื่อให้บรรลุเป้าหมายนี้ก่อนอื่นเราต้องสร้าง ส่วนท้ายที่มีตำแหน่งคงที่ ที่ด้านล่างของหน้าจอ.
1. สร้างส่วนท้ายคงที่
เถอะ เพิ่มเนื้อหาและส่วนท้าย ไปที่หน้าแรก ฉันกำลังใช้แท็ก HTML ในการสาธิตของฉันมีรูปค้างคาวแสดงอยู่ในท้ายกระดาษเพื่อเอฟเฟกต์น่ากลัว แต่คุณสามารถเลือกภาพอื่นที่คุณชอบ. Lorem ipsum dolor sit amet ... ย้ายไปที่ CSS, ลบพื้นที่ใด ๆ รอบ ๆ ให้ขนาดบางส่วน ( ใช้ สีทั้ง ตั้งค่า วิธีนี้จะมีพื้นที่เพียงพอที่ด้านล่างสำหรับส่วนท้ายของ มองเห็นได้ เมื่อผู้ใช้เลื่อนหน้าลง. แค่นั้นแหละ. ส่วนท้ายเปิดเผยผลสำหรับหน้าเว็บเต็มรูปแบบเสร็จแล้ว ตรวจสอบตัวอย่าง Codepen ด้านล่าง. เทคนิคนี้สามารถใช้กับองค์ประกอบ HTML แต่ละรายการ (พร้อมส่วนท้าย) ที่ นานพอสมควร สำหรับเอฟเฟกต์การเลื่อนหน้าที่เหมาะสม วิธีนี้ค่อนข้างแฮ็คเนื่องจากปัจจุบันไม่สามารถใช้งานได้ใน Chrome และ IE แต่มีทางเลือกที่เหมาะสม. ก่อนอื่นเรามาสร้างบทความยาว ๆ พร้อมส่วนท้าย เพื่อส่งเสริมรหัสความหมายฉันเลือก Lorem ipsum dolor sit amet ... ด้านล่างคุณสามารถดู การออกแบบพื้นฐาน ของบทความและส่วนท้าย. ขณะนี้บทความของฉันมีลักษณะเช่นนี้ แน่นอนคุณสามารถใช้กฎสไตล์พื้นฐานอื่น ๆ ได้เช่นกัน. ส่วนท้ายก่อนหน้านี้ได้รับการแก้ไขแล้วอันนี้จะไป เหนียว. ใช้ คุณสามารถปรับค่าให้เหมาะกับรสนิยมของคุณเนื่องจากมันกำหนดจุดที่ส่วนท้ายเริ่มปรากฏหรือหายไปในขณะที่ผู้ใช้เลื่อนลงหรือขึ้น. ให้ ค่าเดียวกันสำหรับระยะขอบด้านล่างของบทความ, เพื่อให้มีพื้นที่เพียงพอที่ด้านล่างเพื่อเปิดเผยส่วนท้ายแบบเต็ม. ตอนนี้เราต้องการ การเปิดถัดจากด้านล่างของบทความ ผ่านที่เราสามารถเห็นส่วนท้ายเหนียวเลื่อนขึ้นและลง. เพื่อให้บรรลุนี้แทนที่ สุดท้ายเรามา วางส่วนท้ายของบทความ ใช้ และนั่นคือองค์ประกอบหน้าแต่ละรายการที่มีเอฟเฟกต์การเปิดเผยเมื่อเลื่อนเสร็จแล้ว ตรวจสอบปากกา Codepen ด้านล่าง คุณสามารถค้นหาทั้งสองกรณีการใช้งานได้ในหน้า Github ของเรา. และ สำหรับความหมาย อย่างไรก็ตาม,
เลื่อนดูเรื่อย ๆ จนกว่าคุณจะเห็นส่วนท้าย
ติดแท็กโดย ตั้งค่าระยะขอบเป็น 0, และทำให้มันนานพอ การเพิ่มความสูงที่กำหนดเอง เพื่อชักนำให้เกิดการเลื่อน (หากเนื้อหาของเนื้อหาในหน้าของคุณยาวพอที่จะทำให้เกิดการเลื่อนคุณไม่ต้องให้ความสูง).ความกว้าง และ ความสูง) ถึงส่วนท้ายและ แก้ไขตำแหน่ง ไปที่ด้านล่างของหน้าจอด้วย ตำแหน่ง: คงที่; และ ด้านล่าง: 0; คุณสมบัติ. เนื้อหา font-family: Crimson Text; ขนาดตัวอักษร: 13pt; กำไรขั้นต้น: 0; ส่วนท้าย ความกว้าง: 100%; ความสูง: 200px; ตำแหน่ง: คงที่; ด้านล่าง: 0; สีพื้นหลัง: # DD5632;
2. ซ่อนส่วนท้าย
ดัชนี z: -1 ปกครองให้ท้ายกระดาษเพื่อ วางไว้ด้านหลังองค์ประกอบอื่น ๆ ทั้งหมด บนหน้า. และ แท็กสีขาวเพื่อ ครอบคลุมส่วนท้าย. body, html background-color: #fff; ส่วนท้าย ความกว้าง: 100%; ความสูง: 200px; ตำแหน่ง: คงที่; ด้านล่าง: 0; สีพื้นหลัง: # DD5632; ดัชนี z: -1;
3. ปรับระยะขอบด้านล่าง
ขอบล่าง ของ แท็ก เท่ากับความสูงของส่วนท้าย (ในตัวอย่างของฉัน 200px). ร่างกาย ความสูง: 1,000px; กำไรขั้นต้น: 0; ระยะขอบล่าง: 200px;
องค์ประกอบของหน้าส่วนบุคคล
1. สร้างบทความแบบยาว
และ .
หัวข้อที่ 1
บทความ width: 500px; สีพื้นหลัง: # FEF9F3; การขยาย: 20px 40px; article> footer height: 100px; สีพื้นหลัง: # FE0178; body font-family: cormorant garamond;
2. ทำท้ายกระดาษ
ตำแหน่ง: เหนียว ปกครองให้ท้ายกระดาษดังนั้นมันจะย้ายภายในขอบเขตของบทความ แต่ยัง รักษาตำแหน่ง บนหน้าจอในขณะที่ผู้ใช้เลื่อนขึ้นและลง. บทความ> ท้ายกระดาษ height: 100px; สีพื้นหลัง: # FE0178; ตำแหน่ง: -webkit-sticky; ตำแหน่ง: เหนียว; ด้านล่าง: 80px;
ด้านล่าง: 80px กฎแก้ไขตำแหน่งของส่วนท้าย 80px เหนือส่วนล่างของบทความ. บทความ width: 500px; สีพื้นหลัง: # FEF9F3; การขยาย: 20px 40px; ระยะขอบล่าง: 80px;
3. เพิ่มพื้นหลังโปร่งใสบางส่วน
สีพื้นหลัง ของบทความด้วย การไล่ระดับสีเชิงเส้น ภาพพื้นหลัง, ซึ่งจากส่วนบนของบทความไปยังด้านบนสุดของส่วนท้าย สีด้วยสีพื้นหลัง ของบทความและส่วนที่เหลือไปด้านล่างคือ ทำโปร่งใส. บทความ width: 500px; การขยาย: 20px 40px; ภาพพื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปยังด้านล่าง, # FEF9F3 calc (100% - 120px), โปร่งใส 0); ระยะขอบล่าง: 80px;
Calc (100% -120px) ฟังก์ชั่น CSS คำนวณ ความสูงเต็มของบทความลบส่วนท้าย. ในตัวอย่างของฉันมันคือ 120px (100px สำหรับความสูง + 20px สำหรับการขยาย).
4. วางท้ายกระดาษกลับ
ดัชนี z: -1 กฎ CSS. บทความ> ท้ายกระดาษ height: 100px; สีพื้นหลัง: # FE0178; ตำแหน่ง: -webkit-sticky; ตำแหน่ง: เหนียว; ด้านล่าง: 80px; ดัชนี z: -1;
