مقدمة
عند كتابة مدونة ، يتم استخدام العديد من الترجمات في كثير من الأحيان للتنظيم. عندما تكون المقالة طويلة ، فأنت بحاجة إلى المكوك ذهابًا وإيابًا بين الألقاب المختلفة. إذا قمت بإضافة دليل يدويًا وأضفت نقطة مرساة ، فهذا أمر مزعج حقًا. لهذا السبب ، يمكنك إنشاء منطقة دليل بشكل ديناميكي واستخدام المكون الإضافي لـ Affix الذي توفره Bootstrap لإصلاح منطقة الدليل على الصفحة. مستندات bootstrap تستخدمه
التحضير - تقديم bootstrap.min.js
ضع bootstrap.min.js في علامة البرنامج النصي قبل الجسم ، ولن يتم تقديم uikit.min.js في الوقت الحالي.
بعد تقديم المكونات الإضافية ذات الصلة ، تتمثل فكرتنا أولاً في إنشاء نقاط مرساة ومحتوى القائمة بناءً على المقالة ، ثم أضفت لها لإنتاج تأثير ثابت ، ثم استخدام المكون الإضافي Scrollspy من Uikit (يوجد أيضًا تمرير في bootstrap ، وطريقة الاستخدام هي نفسها تقريبًا).
قدم التعلم باستخدام اللصقة
يساعدنا المكون الإضافي Affix في إصلاح موضع جزء التنقل وإضافة عمليات إزاحة رأسية إلى العناصر الثابتة وفقًا لموقف تمرير المستخدم ، بحيث يتحول NAV بين ثلاث فئات:
1.fix-top: يشير في الأعلى
2.ffix: يعني التمرير على الصفحة ، وإضافة سمات ثابتة ، واستخدام إزاحة مخصصة
3. -affix-bottom: يعني الوصول إلى القاع
لتمكين الملاءمة فقط يتطلب الكود التالي:
$ ('#nav'). Affix ({Offset: {top: $ ('header'). Offset (). top ، bottom: ($ ('footer'). Outerheight (true) + $ ('.1. تنظيم قطع غيار HTML
<ul id = "mysideBar"> </ul>
تأكد من إضافة فصول NAV و Affix لـ UL.
2. قم بإنشاء رمز التغليف
قدم مقتطف الرمز هذا في البرنامج النصي الخاص بك
؛ $. fn.Extend ({"createaffix": function (selector) {$ list = $ ("" + selector) ، length = $ list.length ، appixvalue = "" ؛ for (var i = 0 ؛ i <length ؛ i ++) $ list.eq (i) .Text () ؛ } this.append (AffixValue) ؛يتمثل مبدأ الكود أعلاه في تمرير علامة أو فئة يجب اعتبارها وحدة عنوان لوظيفة CreateAffix ، وإضافة روابط مرساة إليها أثناء عملية اجتياز.
3. كيفية الاستخدام
كتابة أجزاء HTML
<ul id = "mysidebar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <li> <a href = "#node3"> </a> </li> <h3 id = "node1" 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> </ul>
معالجته ، وقدم سمة Uikit ، وتحقق من المستند للحصول على التفاصيل
<ul id = "mysidebar" data-uk-scrollspy-nav = "{الأقرب: 'li' ، smoothscrool: true}"> <li> <a href = "#node1"> </a> </li> <li> <li> <shref = "#node2"> </li> <shref =تقديم uikit.min.js
منذ تنفيذ عنصر القائمة (LI) بعد تحميل المستند ، إذا تم تنفيذ التمرير الخاص بـ Uikit قبل إنشاء عنصر القائمة ، فلن يعمل بالتأكيد. لذلك ، نحتاج إلى تقديم uikit.min.js بعد إنشاء عنصر القائمة. الرمز كما يلي:
$ (function () {$ ('#mysidebar'). createaffix ('h3') ؛ // إنشاء $ .getScript ("uiKit.min.js") ؛ // load uikit.min.js بشكل غير متزامن ، وتنفيذ مراقبة التمرير.}) ؛