การแนะนำ
เมื่อเขียนบล็อกคำบรรยายจำนวนมากมักจะใช้สำหรับองค์กร เมื่อบทความยาวคุณต้องส่งกลับไปกลับมาระหว่างชื่อที่แตกต่างกัน หากคุณเพิ่มไดเรกทอรีด้วยตนเองและเพิ่มจุดยึดมันเป็นปัญหาจริงๆ ด้วยเหตุผลนี้คุณสามารถสร้างพื้นที่ไดเรกทอรีแบบไดนามิกและใช้ปลั๊กอิน Affix ที่จัดทำโดย Bootstrap เพื่อแก้ไขพื้นที่ไดเรกทอรีบนหน้า เอกสาร Bootstrap ใช้มัน
การเตรียมการ - แนะนำ bootstrap.min.js
ใส่ bootstrap.min.js ลงในแท็กสคริปต์ก่อนร่างกายและ uikit.min.js จะไม่ถูกนำมาใช้ในขณะนี้
หลังจากแนะนำปลั๊กอินที่เกี่ยวข้องความคิดของเราคือการสร้างจุดยึดและเนื้อหาเมนูโดยอัตโนมัติตามบทความจากนั้นเพิ่ม Affix ลงไปเพื่อสร้างเอฟเฟกต์คงที่จากนั้นใช้ปลั๊กอิน scrollspy ของ uikit (นอกจากนี้ยังมี scrollspy ใน bootstrap และวิธีการใช้งานเกือบจะเหมือนกัน)
แนะนำการเรียนรู้การใช้ Affix
ปลั๊กอิน Affix ช่วยให้เราแก้ไขตำแหน่งของส่วนการนำทางและเพิ่มการชดเชยแนวตั้งลงในองค์ประกอบคงที่ตามสถานการณ์การเลื่อนของผู้ใช้เพื่อให้ NAV สลับระหว่างสามคลาส:
1.Affix-Top: ระบุที่ด้านบน
2.Affix: หมายถึงการเลื่อนบนหน้าเพิ่มแอตทริบิวต์คงที่และใช้ออฟเซ็ตที่กำหนดเอง
3.AFTIX-BOTTOM: หมายถึงการมาถึงด้านล่าง
ในการเปิดใช้งาน Affix ต้องใช้รหัสต่อไปนี้เท่านั้น:
$ ('#nav'). affix ({ออฟเซ็ต: {top: $ ('header'). Offset (). ด้านบน, ด้านล่าง: ($ ('footer'). outerheight (จริง) + $ ('. แอปพลิเคชัน'). outerheight (จริง)) + 40}});1. จัดระเบียบชิ้นส่วนรหัส HTML
<ul id = "mysidebar"> </ul>
ให้แน่ใจว่าได้เพิ่มคลาส NAV และ ANDADS สำหรับ UL
2. สร้างรหัสห่อหุ้ม
แนะนำข้อมูลโค้ดนี้ลงในสคริปต์สคริปต์ของคุณเอง
; $. fn.extend ({"createAffix": ฟังก์ชั่น (ตัวเลือก) {$ list = $ ("" + ตัวเลือก), ความยาว = $ list.length, affixValue = "" สำหรับ (var i = 0; i <length; i ++) {// เพิ่มชื่อ $ list.eq (i) .Text (); ถ้า (i == 0) {AffixValue + = " this.append (affixvalue);หลักการของรหัสข้างต้นคือการส่งผ่านในแท็กหรือคลาสที่ต้องได้รับการพิจารณาเป็นหน่วยชื่อสำหรับฟังก์ชั่น createAffix และเพิ่มลิงก์จุดยึดลงไปในระหว่างกระบวนการสำรวจ
3. วิธีใช้
การเขียนชิ้นส่วน HTML
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> 2 </h3> <h3 id = "node3"> ชื่อเรื่อง 3 </h3>
การเขียนส่วน JavaScript
$ (function () {$ ('#mysidebar') createAffix ('h3'); // ระบุว่าในบทความต้องเพิ่มแท็ก `H3` ต้องเพิ่มลงในสมอ.});แก้ปัญหาการชดเชยจุดยึดจุด
เนื่องจากจุดยึดจะเลื่อนหน้าไปที่ด้านบนขององค์ประกอบสมอโดยค่าเริ่มต้นนั่นคือถ้าเราทำการดำเนินการข้างต้นในชื่อ 1 เมื่อเราคลิกที่จุดยึดหน้าจะเลื่อนไปยังตำแหน่งสูงสุดที่ 'ชื่อ 1' อยู่ หากมีแถบเมนูที่ด้านบนมันจะถูกบล็อกและแก้ไขโดยการตั้งค่าสไตล์ CSS
.class { /* การเพิ่มช่องว่างภายในอาจทำให้สมอเพื่อเลื่อน NUM PX ลงนั่นคือข้ามความสูงของแถบเมนู ทำขึ้นสำหรับส่วนที่ว่างเปล่าที่เกิดจากการเติมด้านบนโดยการตั้งค่าส่วนบนให้กับค่าลบ*/ การเติมด้านบน: num px; ขอบด้านบน: -num px;}เพิ่มการฟังการเลื่อน
ปัจจุบันเอกสาร DOM ของเราเป็นเช่นนี้
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li>
ประมวลผลแนะนำแอตทริบิวต์ UIKIT และตรวจสอบรายละเอียดเอกสาร
<ul id = "mysidebar" data-uk-scrollspy-nav = "{ใกล้ที่สุด: 'li', smoothscrool: true}"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a>แนะนำ uikit.min.js
เนื่องจากรายการเมนูของเรา (LI) ถูกดำเนินการหลังจากโหลดเอกสารหาก scrollspy ของ uikit ถูกดำเนินการก่อนที่รายการเมนูจะถูกสร้างขึ้นมันจะไม่ทำงานอย่างแน่นอน ดังนั้นเราจำเป็นต้องแนะนำ uikit.min.js หลังจากสร้างรายการเมนู รหัสมีดังนี้:
$ (function () {$ ('#mysidebar') createAffix ('h3'); // สร้างเมนู $ .getScript ("uikit.min.js"); // โหลด uikit.min.js แบบอะซิงโครนัสและการตรวจสอบการเลื่อน