Latest web development tutorials
×

Bootstrap مسار

Bootstrap مسار Bootstrap مقدمة موجزة Bootstrap البيئة التثبيت

Bootstrap CSS

Bootstrap CSS نظرة عامة Bootstrap نظام الشبكة Bootstrap تنضيد Bootstrap قانون Bootstrap طاولة Bootstrap شكل Bootstrap زر Bootstrap صور Bootstrap الطبقة المساعدة Bootstrap المرافق تستجيب

Bootstrap مكونات التخطيط

Bootstrap رمز الخطوط Bootstrap القائمة المنسدلة Bootstrap زر المجموعة Bootstrap زر القائمة المنسدلة Bootstrap مجموعة مربع الإدخال Bootstrap عناصر الملاحة Bootstrap شريط التنقل Bootstrap فتات الخبز Bootstrap ترحيل Bootstrap ملصق Bootstrap شارة Bootstrap شاشة كبيرة Bootstrap عنوان الصفحة Bootstrap الصور المصغرة Bootstrap تحذير Bootstrap شريط تقدم Bootstrap كائنات الوسائط المتعددة Bootstrap المجموعات Bootstrap لوحة Bootstrap Wells

Bootstrap القطعة

Bootstrap المكونات محة سريعة Bootstrap تأثير انتقال Bootstrap مربع مشروط Bootstrap القائمة المنسدلة Bootstrap رصد التمرير Bootstrap علامة التبويب Bootstrap نصائح أداة Bootstrap مربع منبثق Bootstrap مربع التنبيه Bootstrap زر Bootstrap طية Bootstrap دائري Bootstrap الملاحة إضافية

Bootstrap آخر

Bootstrap UI محرر Bootstrap V2 مسار Bootstrap HTML الترميز المعايير Bootstrap CSS الترميز المعايير

التمهيد الملاحة إضافي (يضعوا) القطعة

إضافي الملاحة (يضعوا) في المكونات يسمح <div> الثابتة في موقف معين على الصفحة. يمكنك أيضا تشغيل أو إيقاف تشغيله باستخدام التبديل بين المكونات. ومن الأمثلة الشائعة هي رمز الاجتماعي. وسوف تبدأ في موقف معين، ولكن عندما تكون الصفحة انقر على علامة، و<div> سوف يكون مؤمنا في موقف، وليس مع بقية التمرير الصفحة.

إذا كنت ترغب في الرجوع إلى الميزات الفردية في المكونات، تحتاج إلى مرجعaffix.js.أو كما التمهيد المساعد لمحة ذكر الفصل، يمكنك الرجوع إلىbootstrap.jsأو نسخة مضغوطة منbootstrap.min.js.

استعمال

يمكنك السمة البيانات، أو باستخدام JavaScript إضافية للتنقل (يضعوا) المكونات الإضافية.

  • من خلال سمات البيانات: لإضافة عنصر إضافي لسلوك الملاحة (يضعوا)، وتحتاج فقط إلى إضافة عنصر تريد مراقبة بيانات الجاسوس = "يضعوا"يمكن أن يكون. استخدام إزاحة لتحديد عنصر قفل ووقت تشغيل المحمول.

    أمثلة

    يوضح المثال التالي استخدام إضافية القطعة الملاحة (يضعوا) من خلال البيانات السمة الاستعمال:

    أمثلة

    <! DOCTYPE أتش تي أم أل> <HTML> <رئيس> <ميتا محارف = "UTF-8"> <عنوان> التمهيد الملاحة إضافي (يضعوا) القطعة </ عنوان> <لينك يختلط = "أنماط" أ href = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <سيناريو SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <سيناريو SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <نمط>
    / * الأنماط مخصص * / المجاهدين .nav علامات التبويب { عرض: 140 بكسل ؛ الهامش العلوي: 20 بكسل ؛ الحدود نصف قطرها: 4 بكسل ؛ الحدود: 1 بكسل صلب #DDD ، صندوق الظل: 0 1 بكسل 4 بكسل رغبا (0، 0، 0، 0،067) ؛} المجاهدين .nav علامات التبويب لى { هامش: 0 ؛ الحدود بين كبار: 1 بكسل صلب #DDD ؛} المجاهدين .nav علامات التبويب لى: أول طفل { الحدود بين كبار: لا شيء ؛} المجاهدين .nav علامات التبويب لى و{ هامش: 0 ؛ الحشو: 8 بكسل 16 بكسل ؛ الحدود نصف قطرها: 0 ؛} المجاهدين .nav علامات التبويب لى .active لذلك، المجاهدين .nav علامات التبويب لى .active و: تحوم { اللون: # الاتحاد الفرنسي ؛ الخلفية: # 0088cc ؛ الحدود: 1 بكسل صلب # 0088cc ؛} المجاهدين .nav علامات التبويب لى: أولا الطفل و{ الحدود بين دائرة نصف قطرها: 4 بكسل 4 بكسل 0 0 ؛} المجاهدين .nav علامات التبويب لى: الماضي والطفل و{ الحدود بين دائرة نصف قطرها: 0 0 4 بكسل 4 بكسل ؛} المجاهدين .nav علامات التبويب .affix { أعلى: 30 بكسل ؛ / * تعيين موضع العلوي من عنصر معقود * / }
    </ النمط> </ رئيس> <الجسم بيانات الجاسوس = "تمرير" المستهدفة البيانات = "#myScrollspy"> <div الطبقة = "حاوية"> <div الطبقة = "jumbotron"> <H1> التمهيد يضعوا </ H1 > </ div> <div الطبقة = "الصف"> <div الطبقة = "عمود-XS-3 " معرف = "myScrollspy"> <UL الطبقة = "الملاحة الملاحة علامات التبويب الملاحة -stacked" بيانات الجاسوس = "يضعوا" إزاحة بيانات أعلى = "125 "> <لي الطبقة = "نشطة"> <ل أ href = "# قسم-1" > الجزء الأول </ أ> </ لى> <لي> أ href = "# قسم-2" > الجزء الثاني </ أ> </ لى> <لي> أ href = "# قسم 3" > الجزء الثالث </ أ> </ لى> <لي> أ href = "# قسم-4" > الجزء الرابع </ أ> </ لى> <لي> أ href = "# قسم 5" > الجزء الخامس </ أ> </ لى> </ UL> </ div> <div الطبقة = "عمود-XS-9 "> <H2 معرف = "مقطع 1"> الجزء الأول </ H2> <P> أبجد هوز دولور الجلوس امات ، consectetur adipiscing إيليت. نام الاتحاد الأوروبي ووزارة شؤون المرأة tempor، كيف فريوس] في، luctus وثيقة الهوية الوحيدة. Mauris ماجنا metus، dapibus غير المصنفة في موضع turpis فيل، سمبر malesuada ما كان عليه سابقا. دهليز معرف metus ميلان nisl bibendum scelerisque غير غير بوروس. Suspendisse فريوس nibh غير aliquet sagittis. في tincidunt أورسي الجلوس امات elementum دهليز. Vivamus خميرة في arcu في aliquam. Quisque aliquam بورتا أوديو في fringilla. Vivamus ليو nisl، blandit في bibendum الاتحاد الأوروبي، tristique eget RISUS. صحيح aliquet quam التحرير إيليت suscipit، interdum معرف porttitor neque. صحيح ligula faucibus. < / P> <P> دهليز quis quam التحرير ماجنا consequat faucibus. Pellentesque eget احترازيا مي suscipit tincidunt. أوت تيمبوس القول المأثور RISUS. Pellentesque viverra sagittis quam في ماتيس. potenti Suspendisse. Aliquam الجلوس امات حامل؛ حبلى nibh، facilisis حامل؛ حبلى أوديو. Phasellus auctor velit في blandit lacus ، commodo iaculis خوستو viverra. Etiam السيرة بتوقيت شرق الولايات المتحدة arcu. Mauris فيل congue دولور. aliquam eget ميل ميل. Fusce quam tortor، commodo ميلان وثيقة الهوية الوحيدة quis، bibendum viverra erat. Maecenas ماتيس LECTUS ENIM، quis tincidunt دوى molestie euismod. Curabitur آخرون بقطر tristique، accumsan نونك الاتحاد الأوروبي، hendrerit تيلوس. < / P> <hr> <H2 معرف = "مقطع 2"> القسم الثاني </ H2> <P> Nullam hendrerit خوستو غير ليو aliquet imperdiet. Etiam في sagittis LECTUS. Suspendisse ultrices placerat accumsan. Mauris quis dapibus أورسي. وفي dapibus velit blandit pharetra tincidunt. Quisque غير سابين غير المصنفة في موضع lacus condimentum facilisis التحرير iaculis ENIM. سد viverra interdum bibendum. Donec ميلان sollicitudin دولور. الحوار الاقتصادي الاستراتيجي fringilla السيرة lacus في rutrum. Phasellus congue دهليز ligula الحوار الاقتصادي الاستراتيجي consequat. </ P> <P> دهليز consectetur scelerisque lacus، الحوار الاقتصادي الاستراتيجي ميلان خميرة أبجد convallis. نام أوديو tortor، القول المأثور quis malesuada في، أورسي السيرة pellentesque. Vivamus elementum، فليس الاتحاد الأوروبي auctor lobortis، بقطر velit egestas lacus، quis خميرة metus الرهان quis URNA. رسب في facilisis يبيرو. نائب الرئيس sociis natoque penatibus آخرون ماغنيس ديس ماخض مونتيس، nascetur ريديكولوس المصحف. دهليز bibendum blandit دولور. دولور نونك أورسي، molestie nibh غير المصنفة في، hendrerit tincidunt ما كان عليه سابقا. Vivamus ووزارة شؤون المرأة augue، hendrerit غير سابين في، موليس ornare augue. </ P > <hr> <H2 معرف = "الجزء 3"> الجزء الثالث </ H2> <P> صحيح شحم ليو معرف RISUS pellentesque دهليز. سد بقطر يبيرو، حوار sodales eget سابين فيل، porttitor bibendum ENIM. Donec nibh السيرة أبجد porttitor blandit في الرهان غير المصنفة. Pellentesque السيرة metus هوز. Phasellus الحوار الاقتصادي الاستراتيجي نونك ميلان ووزارة شؤون المرأة malesuada condimentum. Etiam في aliquam LECTUS. نام فيل سابين بقطر. Donec pharetra معرف arcu eget blandit. Proin imperdiet ماتيس augue في porttitor. Quisque تيمبوس ENIM معرف lobortis feugiat. Suspendisse tincidunt RISUS quis دولور fringilla blandit. أوت الحوار الاقتصادي الاستراتيجي سابين في porttitor بوروس خمل. Nullam iaculis، الهرية à pretium ornare، دولور nisl سمبر tortor، فيل sagittis lacus بتوقيت شرق الولايات المتحدة consequat إيروس. سد معرف pretium nisl. Curabitur دولور nisl، laoreet السيرة aliquam الهوية، tincidunt الجلوس امات mauris. </ P> <P> Phasellus السيرة suscipit خوستو. Mauris pharetra feugiat انتي معرف خمل. Etiam faucibus mauris معرف egestas tempor. Duis luctus turpis في tincidunt accumsan. Phasellus RISUS تكشيرة، volutpat فيل تيلوس ميلان، tincidunt fringilla ماسا. Etiam hendrerit دولور eget الرهان rutrum adipiscing. وكالات التصنيف الائتماني interdum هوز ماتيس، تيمبوس mauris فيل ، سمبر هوز. Duis الحوار الاقتصادي الاستراتيجي دولور التحرير ENIM lobortis pellentesque ultricies ميلان ligula. Pellentesque convallis إيليت احترازيا، معرف vulputate هوز ullamcorper التحرير. كالات التصنيف الائتماني ميلان شحم بوروس، potenti ميلان viverra بتوقيت شرق الولايات المتحدة. Suspendisse. صحيح pellentesque neque وآخرون elementum تيمبوس. Curabitur bibendum في ligula التحرير rhoncus. </ P> <P> Quisque pharetra velit معرف velit iaculis pretium. Nullam لخوستو الحوار الاقتصادي الاستراتيجي ligula بورتا سمبر الاتحاد الأوروبي quis ENIM. Pellentesque pellentesque، metus في hendrerit facilisis، LECTUS velit facilisis ليو، quis volutpat turpis arcu quis ENIM. لا عقوبة viverra أبجد elementum interdum ultricies. Suspendisse accumsan quam غير المصنفة في موضع الرهان موليس تيمبوس. مرضي فيل accumsan بقطر، eget potenti convallis تيلوس. Suspendisse. </ P> <hr> <H2 معرف = "قسم 4"> الجزء الرابع </ H2> <P> Suspendisse لأورسي facilisis، dignissim tortor الذاتية، ultrices ميل. دهليز على iaculis lacus. Phasellus السيرة convallis ligula، غير المصنفة في موضع volutpat تيلوس. Vivamus scelerisque موليس nisl، غير المصنفة في موضع vehicula إيليت egestas أ. ااا luctus metus معرف ميل حامل؛ حبلى، faucibus convallis neque pretium. Maecenas quis سابين التحرير ليو fringilla tempor السيرة الجلوس امات ليو. Donec imperdiet تيمبوس placerat. Pellentesque شحم ultrices نونك ااا ultrices. مرضي فيل ميل pretium، خميرة lacus وآخرون، viverra تيلوس. Phasellus sodales يبيرو convallis غير المصنفة في موضع وثيقة الهوية الوحيدة، والجلوس امات خميرة سابين auctor . دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae ؛. سد الاتحاد الأوروبي elementum nibh، quis فريوس يبيرو </ P> <P> دهليز quis quam التحرير ماجنا consequat faucibus. Pellentesque eget احترازيا مي suscipit tincidunt. أوت تيمبوس القول المأثور RISUS. Pellentesque viverra sagittis quam في ماتيس. potenti Suspendisse. Aliquam الجلوس امات حامل؛ حبلى nibh، facilisis حامل؛ حبلى أوديو. Phasellus auctor velit في blandit lacus ، commodo iaculis خوستو viverra. Etiam السيرة بتوقيت شرق الولايات المتحدة arcu. Mauris فيل congue دولور. aliquam eget ميل ميل. Fusce quam tortor، commodo ميلان وثيقة الهوية الوحيدة quis، bibendum viverra erat. Maecenas ماتيس LECTUS ENIM، quis tincidunt دوى molestie euismod. Curabitur آخرون بقطر tristique، accumsan نونك الاتحاد الأوروبي، hendrerit تيلوس. < / P> <P> Phasellus متخمر، والجلوس neque امات sodales tempor، ENIM الرهان interdum إيروس، eget luctus هوز إيروس التحرير ligula. نونك erat ornare quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis، إيروس التحرير dapibus luctus، ماسا ENIM elementum بوروس، والجلوس امات tristique بوروس بوروس غير المصنفة في موضع الهرية. مرضي دهليز سابين eget بورتا شحم. نام في بقطر quam. Proin rhoncus، الهرية elementum accumsan القول المأثور، الهرية احترازيا دهليز تيلوس، وآخرون ultrices RISUS الهرية في أورسي. nisl Quisque دهليز ووزارة شؤون المرأة، فيل congue ليو القول المأثور غير المصنفة. وكالات التصنيف الائتماني بتوقيت شرق الولايات المتحدة eget في velit sagittis ullamcorper فيل وآخرون LECTUS. في مفوضية العمل الانساني dictumst habitasse platea. Etiam interdum iaculis velit، فيل sollicitudin أبجد feugiat الجلوس امات. Etiam luctus، كيف ااا sodales aliquam، أبجد يبيرو hendrerit URNA، faucibus rhoncus ماسا nibh في الهرية. Curabitur ميلان تيمبوس ولا عقوبة، UT erat SEMPER. Vivamus بورتا ullamcorper ووزارة شؤون المرأة، ornare egestas mauris facilisis الهوية. </ P> <P> أوت التحرير RISUS nisl. Fusce porttitor إيروس في luctus ماجنا، غير eleifend congue ولا عقوبة. porttitor Aenean feugiat دولور الجلوس امات facilisis. Pellentesque venenatis ماجنا آخرون RISUS commodo، وهي حامل؛ حبلى commodo turpis. نام موليس ماسا dapibus URNA aliquet، quis iaculis إيليت sodales. سد eget ornare أورسي، الاتحاد الأوروبي malesuada خوستو. نونك lacus augue، القول المأثور quis دوى الهوية، خمل congue quam. لا عقوبة ووزارة شؤون المرأة ووزارة شؤون المرأة، aliquam غير المصنفة في موضع دولور ميلان، تيمبوس convallis نونك. interdum آخرون malesuada جوع ميلان كان عليه سابقا هوز بريمس في faucibus. لا عقوبة suscipit convallis iaculis. Quisque eget commodo ligula. Praesent ليو وثيقة الهوية الوحيدة، facilisis quis eleifend في، aliquet السيرة نونك. Suspendisse خميرة أوديو ميلان ماسا ultricies pellentesque. Fusce الاتحاد الأوروبي suscipit ماسا. </ P> <hr> <H2 معرف = "القسم 5"> الجزء الخامس </ H2> <P> نام eget بوروس مشتغلون consectetur vehicula. Nullam ultrices RISUS nisl، في viverra يبيرو egestas الجلوس امات. Etiam porttitor دولور غير إيروس شحم malesuada. دهليز الجلوس امات بتوقيت شرق الولايات المتحدة موليس لا عقوبة تيمبوس aliquet. Praesent luctus hendrerit arcu غير laoreet. مرضي consequat placerat ماجنا، ميلان ornare أوديو sagittis الحوار الاقتصادي الاستراتيجي. Donec السيرة ullamcorper بوروس. Vivamus غير metus ميلان خوستو بورتا volutpat. </ P> <P> Vivamus ماتيس accumsan erat، فيل convallis RISUS pretium اللجنة الوطنية للانتخابات. صحيح نونك ولا عقوبة، viverra التحرير ووزارة شؤون المرأة غير، scelerisque vehicula arcu. Fusce bibendum convallis augue الجلوس امات lobortis. كالات التصنيف الائتماني بورتا URNA turpis، sodales lobortis بوروس adipiscing الهوية. Maecenas ullamcorper، turpis suscipit fringilla pellentesque، ماسا lacus شحم ميل ، غير المصنفة في موضع dignissim velit arcu eget بوروس. نام في تيلوس dapibus، eget euismod nisl. أوت eget venenatis سابين. Vivamus vulputate فريوس mauris، فيل فريوس nisl facilisis ميلان. لا عقوبة aliquet خوستو على nibh ornare، الاتحاد الأوروبي congue neque rutrum. </ P> <P> Suspendisse لأورسي facilisis، dignissim tortor الذاتية، ultrices ميل. دهليز على iaculis lacus. Phasellus السيرة convallis ligula، غير المصنفة في موضع volutpat تيلوس. Vivamus scelerisque موليس nisl، غير المصنفة في موضع vehicula إيليت egestas أ. ااا luctus metus معرف ميل حامل؛ حبلى، faucibus convallis neque pretium. Maecenas quis سابين التحرير ليو fringilla tempor السيرة الجلوس امات ليو. Donec imperdiet تيمبوس placerat. Pellentesque شحم ultrices نونك ااا ultrices. مرضي فيل ميل pretium، خميرة lacus وآخرون، viverra تيلوس. Phasellus sodales يبيرو convallis غير المصنفة في موضع وثيقة الهوية الوحيدة، والجلوس امات خميرة سابين auctor . دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae ؛. سد الاتحاد الأوروبي elementum nibh، quis فريوس يبيرو </ P> <P> مرضي الحوار الاقتصادي الاستراتيجي خميرة هوز. مرضي لأورسي vulputate tortor ornare blandit على quis أورسي. Donec aliquam sodales حامل؛ حبلى. وفي التحرير ullamcorper احترازيا، ميلان pretium velit. دهليز السيرة LECTUS volutpat، consequat أبجد الجلوس امات، شحم تيلوس. وفي tincidunt فيل ليو eget شحم. Curabitur لاروس غير lacus aliquam malesuada. Praesent آخرون تيمبوس أوديو. صحيح على نونك quam. في مفوضية العمل الانساني dictumst habitasse platea. aliquam بورتا nibh لا عقوبة، وآخرون ماتيس turpis placerat eget. Pellentesque دوى بقطر، pellentesque فيل حامل؛ حبلى الهوية، accumsan الاتحاد الأوروبي ماجنا . (سيد) وarcu سمبر، التحرير dignissim ليو. </ P> <P> سد السيرة lobortis بقطر، معرف molestie ماجنا. Aliquam consequat هوز quis بتوقيت شرق الولايات المتحدة القول المأثور ultrices. velit Aenean nibh، fringilla في معرف بقطر، blandit hendrerit lacus. Donec vehicula rutrum تيلوس eget خميرة. Pellentesque ميلان erat آخرون arcu ornare tincidunt. erat Aliquam volutpat. Vivamus lobortis URNA quis حامل؛ حبلى سمبر . وفي condimentum، طبقا لتقديرات وfaucibus luctus، ميل ميل دولور CURSUS، معرف vehicula arcu تكشيرة على nibh. Pellentesque blandit سابين lacus، فيل vehicula نونك feugiat الجلوس امات. </ P> </ div> </ div> </ div> </ الجسم> </ HTML>

    محاولة »

    وكانت النتائج على النحو التالي:

    الملاحة إضافي (يضعوا) سد خصائص Data
  • بواسطة جافا سكريبت: يمكنك إضافة عنصر جافا سكريبت الملاحة إضافتها يدويا (يضعوا) على النحو التالي:
    $ ( '# MyAffix'). يلصق ({
       الأوفست: {
    	  كبار: 100، أسفل: وظيفة () {
    		 عودة (this.bottom = 
    			$ ( '. BS-تذييل). OuterHeight (صحيح))
    		 }
    	  }
    })
    

    أمثلة

    يوضح المثال التالي استخدام إضافية القطعة الملاحة (يضعوا) عن طريق استخدام جافا سكريبت:

    أمثلة

    <! DOCTYPE أتش تي أم أل> <HTML> <رئيس> <ميتا محارف = "UTF-8"> <عنوان> التمهيد الملاحة إضافي (يضعوا) القطعة </ عنوان> <لينك يختلط = "أنماط" أ href = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <سيناريو SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <سيناريو SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <نمط>
    / * الأنماط مخصص * / المجاهدين .nav علامات التبويب { عرض: 140 بكسل ؛ الهامش العلوي: 20 بكسل ؛ الحدود نصف قطرها: 4 بكسل ؛ الحدود: 1 بكسل صلب #DDD ، صندوق الظل: 0 1 بكسل 4 بكسل رغبا (0، 0، 0، 0،067) ؛} المجاهدين .nav علامات التبويب لى { هامش: 0 ؛ الحدود بين كبار: 1 بكسل صلب #DDD ؛} المجاهدين .nav علامات التبويب لى: أول طفل { الحدود بين كبار: لا شيء ؛} المجاهدين .nav علامات التبويب لى و{ هامش: 0 ؛ الحشو: 8 بكسل 16 بكسل ؛ الحدود نصف قطرها: 0 ؛} المجاهدين .nav علامات التبويب لى .active لذلك، المجاهدين .nav علامات التبويب لى .active و: تحوم { اللون: # الاتحاد الفرنسي ؛ الخلفية: # 0088cc ؛ الحدود: 1 بكسل صلب # 0088cc ؛} المجاهدين .nav علامات التبويب لى: أولا الطفل و{ الحدود بين دائرة نصف قطرها: 4 بكسل 4 بكسل 0 0 ؛} المجاهدين .nav علامات التبويب لى: الماضي والطفل و{ الحدود بين دائرة نصف قطرها: 0 0 4 بكسل 4 بكسل ؛} المجاهدين .nav علامات التبويب .affix { أعلى: 30 بكسل ؛ / * تعيين موضع العلوي من عنصر معقود * / }
    </ النمط> <script>
    $ (الوثيقة). استعداد (وظيفة () {$ ( "#myNav"). يلصق ({ الأوفست: { كبار: 125 } })؛})؛
    </ script> </ رئيس> <الجسم بيانات الجاسوس = "تمرير" المستهدفة البيانات = "#myScrollspy"> <div الطبقة = "حاوية"> <div الطبقة = "jumbotron"> <H1> التمهيد يضعوا </ H1 > </ div> <div الطبقة = "الصف"> <div الطبقة = "عمود-XS-3 " معرف = "myScrollspy"> <UL الطبقة = "الملاحة الملاحة علامات التبويب الملاحة -stacked" معرف = "myNav"> <لي الطبقة = "نشطة"> <ل أ href = "# قسم-1" > الجزء الأول </ أ> </ لى> <لي> أ href = "# قسم-2" > الجزء الثاني </ أ> </ لى> <لي> أ href = "# قسم 3" > الجزء الثالث </ أ> </ لى> <لي> أ href = "# قسم-4" > الجزء الرابع </ أ> </ لى> <لي> أ href = "# قسم 5" > الجزء الخامس </ أ> </ لى> </ UL> </ div> <div الطبقة = "عمود-XS-9 "> <H2 معرف = "مقطع 1"> الجزء الأول </ H2> <P> أبجد هوز دولور الجلوس امات ، consectetur adipiscing إيليت. نام الاتحاد الأوروبي ووزارة شؤون المرأة tempor، كيف فريوس] في، luctus وثيقة الهوية الوحيدة. Mauris ماجنا metus، dapibus غير المصنفة في موضع turpis فيل، سمبر malesuada ما كان عليه سابقا. دهليز معرف metus ميلان nisl bibendum scelerisque غير غير بوروس. Suspendisse فريوس nibh غير aliquet sagittis. في tincidunt أورسي الجلوس امات elementum دهليز. Vivamus خميرة في arcu في aliquam. Quisque aliquam بورتا أوديو في fringilla. Vivamus ليو nisl، blandit في bibendum الاتحاد الأوروبي، tristique eget RISUS. صحيح aliquet quam التحرير إيليت suscipit، interdum معرف porttitor neque. صحيح ligula faucibus. < / P> <P> دهليز quis quam التحرير ماجنا consequat faucibus. Pellentesque eget احترازيا مي suscipit tincidunt. أوت تيمبوس القول المأثور RISUS. Pellentesque viverra sagittis quam في ماتيس. potenti Suspendisse. Aliquam الجلوس امات حامل؛ حبلى nibh، facilisis حامل؛ حبلى أوديو. Phasellus auctor velit في blandit lacus ، commodo iaculis خوستو viverra. Etiam السيرة بتوقيت شرق الولايات المتحدة arcu. Mauris فيل congue دولور. aliquam eget ميل ميل. Fusce quam tortor، commodo ميلان وثيقة الهوية الوحيدة quis، bibendum viverra erat. Maecenas ماتيس LECTUS ENIM، quis tincidunt دوى molestie euismod. Curabitur آخرون بقطر tristique، accumsan نونك الاتحاد الأوروبي، hendrerit تيلوس. < / P> <hr> <H2 معرف = "مقطع 2"> القسم الثاني </ H2> <P> Nullam hendrerit خوستو غير ليو aliquet imperdiet. Etiam في sagittis LECTUS. Suspendisse ultrices placerat accumsan. Mauris quis dapibus أورسي. وفي dapibus velit blandit pharetra tincidunt. Quisque غير سابين غير المصنفة في موضع lacus condimentum facilisis التحرير iaculis ENIM. سد viverra interdum bibendum. Donec ميلان sollicitudin دولور. الحوار الاقتصادي الاستراتيجي fringilla السيرة lacus في rutrum. Phasellus congue دهليز ligula الحوار الاقتصادي الاستراتيجي consequat. </ P> <P> دهليز consectetur scelerisque lacus، الحوار الاقتصادي الاستراتيجي ميلان خميرة أبجد convallis. نام أوديو tortor، القول المأثور quis malesuada في، أورسي السيرة pellentesque. Vivamus elementum، فليس الاتحاد الأوروبي auctor lobortis، بقطر velit egestas lacus، quis خميرة metus الرهان quis URNA. رسب في facilisis يبيرو. نائب الرئيس sociis natoque penatibus آخرون ماغنيس ديس ماخض مونتيس، nascetur ريديكولوس المصحف. دهليز bibendum blandit دولور. دولور نونك أورسي، molestie nibh غير المصنفة في، hendrerit tincidunt ما كان عليه سابقا. Vivamus ووزارة شؤون المرأة augue، hendrerit غير سابين في، موليس ornare augue. </ P > <hr> <H2 معرف = "الجزء 3"> الجزء الثالث </ H2> <P> صحيح شحم ليو معرف RISUS pellentesque دهليز. سد بقطر يبيرو، حوار sodales eget سابين فيل، porttitor bibendum ENIM. Donec nibh السيرة أبجد porttitor blandit في الرهان غير المصنفة. Pellentesque السيرة metus هوز. Phasellus الحوار الاقتصادي الاستراتيجي نونك ميلان ووزارة شؤون المرأة malesuada condimentum. Etiam في aliquam LECTUS. نام فيل سابين بقطر. Donec pharetra معرف arcu eget blandit. Proin imperdiet ماتيس augue في porttitor. Quisque تيمبوس ENIM معرف lobortis feugiat. Suspendisse tincidunt RISUS quis دولور fringilla blandit. أوت الحوار الاقتصادي الاستراتيجي سابين في porttitor بوروس خمل. Nullam iaculis، الهرية à pretium ornare، دولور nisl سمبر tortor، فيل sagittis lacus بتوقيت شرق الولايات المتحدة consequat إيروس. سد معرف pretium nisl. Curabitur دولور nisl، laoreet السيرة aliquam الهوية، tincidunt الجلوس امات mauris. </ P> <P> Phasellus السيرة suscipit خوستو. Mauris pharetra feugiat انتي معرف خمل. Etiam faucibus mauris معرف egestas tempor. Duis luctus turpis في tincidunt accumsan. Phasellus RISUS تكشيرة، volutpat فيل تيلوس ميلان، tincidunt fringilla ماسا. Etiam hendrerit دولور eget الرهان rutrum adipiscing. وكالات التصنيف الائتماني interdum هوز ماتيس، تيمبوس mauris فيل ، سمبر هوز. Duis الحوار الاقتصادي الاستراتيجي دولور التحرير ENIM lobortis pellentesque ultricies ميلان ligula. pellentesque convallis إيليت احترازيا، معرف vulputate هوز ullamcorper التحرير. كالات التصنيف الائتماني ميلان شحم بوروس، potenti ميلان viverra بتوقيت شرق الولايات المتحدة. Suspendisse. صحيح pellentesque neque وآخرون elementum تيمبوس. Curabitur bibendum في ligula التحرير rhoncus. </ P> <P> Quisque pharetra velit معرف velit iaculis pretium. Nullam لخوستو الحوار الاقتصادي الاستراتيجي ligula بورتا سمبر الاتحاد الأوروبي quis ENIM. Pellentesque pellentesque، metus في hendrerit facilisis، LECTUS velit facilisis ليو، quis volutpat turpis arcu quis ENIM. لا عقوبة viverra أبجد elementum interdum ultricies. Suspendisse accumsan quam غير المصنفة في موضع الرهان موليس تيمبوس. مرضي فيل accumsan بقطر، eget potenti convallis تيلوس. Suspendisse. </ P> <hr> <H2 معرف = "قسم 4"> الجزء الرابع </ H2> <P> Suspendisse لأورسي facilisis، dignissim tortor الذاتية، ultrices ميل. دهليز على iaculis lacus. Phasellus السيرة convallis ligula، غير المصنفة في موضع volutpat تيلوس. Vivamus scelerisque موليس nisl، غير المصنفة في موضع vehicula إيليت egestas أ. ااا luctus metus معرف ميل حامل؛ حبلى، faucibus convallis neque pretium. Maecenas quis سابين التحرير ليو fringilla tempor السيرة الجلوس امات ليو. Donec imperdiet تيمبوس placerat. Pellentesque شحم ultrices نونك ااا ultrices. مرضي فيل ميل pretium، خميرة lacus وآخرون، viverra تيلوس. Phasellus sodales يبيرو convallis غير المصنفة في موضع وثيقة الهوية الوحيدة، والجلوس امات خميرة سابين auctor . دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae ؛. سد الاتحاد الأوروبي elementum nibh، quis فريوس يبيرو </ P> <P> دهليز quis quam التحرير ماجنا consequat faucibus. Pellentesque eget احترازيا مي suscipit tincidunt. أوت تيمبوس القول المأثور RISUS. Pellentesque viverra sagittis quam في ماتيس. potenti Suspendisse. Aliquam الجلوس امات حامل؛ حبلى nibh، facilisis حامل؛ حبلى أوديو. Phasellus auctor velit في blandit lacus ، commodo iaculis خوستو viverra. Etiam السيرة بتوقيت شرق الولايات المتحدة arcu. Mauris فيل congue دولور. aliquam eget ميل ميل. Fusce quam tortor، commodo ميلان وثيقة الهوية الوحيدة quis، bibendum viverra erat. Maecenas ماتيس LECTUS ENIM، quis tincidunt دوى molestie euismod. Curabitur آخرون بقطر tristique، accumsan نونك الاتحاد الأوروبي، hendrerit تيلوس. < / P> <P> Phasellus متخمر، والجلوس neque امات sodales tempor، ENIM الرهان interdum إيروس، eget luctus هوز إيروس التحرير ligula. نونك erat ornare quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis، إيروس التحرير dapibus luctus، ماسا ENIM elementum بوروس، والجلوس امات tristique بوروس بوروس غير المصنفة في موضع الهرية. مرضي دهليز سابين eget بورتا شحم. نام في بقطر quam. Proin rhoncus، الهرية elementum accumsan القول المأثور، الهرية احترازيا دهليز تيلوس، وآخرون ultrices RISUS الهرية في أورسي. nisl Quisque دهليز ووزارة شؤون المرأة، فيل congue ليو القول المأثور غير المصنفة. وكالات التصنيف الائتماني بتوقيت شرق الولايات المتحدة eget في velit sagittis ullamcorper فيل وآخرون LECTUS. في مفوضية العمل الانساني dictumst habitasse platea. Etiam interdum iaculis velit، فيل sollicitudin أبجد feugiat الجلوس امات. Etiam luctus، كيف ااا sodales aliquam، أبجد يبيرو hendrerit URNA، faucibus rhoncus ماسا nibh في الهرية. Curabitur ميلان تيمبوس ولا عقوبة، UT erat SEMPER. Vivamus بورتا ullamcorper ووزارة شؤون المرأة، ornare egestas mauris facilisis الهوية. </ P> <P> أوت التحرير RISUS nisl. Fusce porttitor إيروس في luctus ماجنا، غير eleifend congue ولا عقوبة. porttitor Aenean feugiat دولور الجلوس امات facilisis. Pellentesque venenatis ماجنا آخرون RISUS commodo، وهي حامل؛ حبلى commodo turpis. نام موليس ماسا dapibus URNA aliquet، quis iaculis إيليت sodales. سد eget ornare أورسي، الاتحاد الأوروبي malesuada خوستو. نونك lacus augue، القول المأثور quis دوى الهوية، خمل congue quam. لا عقوبة ووزارة شؤون المرأة ووزارة شؤون المرأة، aliquam غير المصنفة في موضع دولور ميلان، تيمبوس convallis نونك. interdum آخرون malesuada جوع ميلان كان عليه سابقا هوز بريمس في faucibus. لا عقوبة suscipit convallis iaculis. Quisque eget commodo ligula. Praesent ليو وثيقة الهوية الوحيدة، facilisis quis eleifend في، aliquet السيرة نونك. Suspendisse خميرة أوديو ميلان ماسا ultricies pellentesque. Fusce الاتحاد الأوروبي suscipit ماسا. </ P> <hr> <H2 معرف = "القسم 5"> الجزء الخامس </ H2> <P> نام eget بوروس مشتغلون consectetur vehicula. Nullam ultrices RISUS nisl، في viverra يبيرو egestas الجلوس امات. Etiam porttitor دولور غير إيروس شحم malesuada. دهليز الجلوس امات بتوقيت شرق الولايات المتحدة موليس لا عقوبة تيمبوس aliquet. Praesent luctus hendrerit arcu غير laoreet. مرضي consequat placerat ماجنا، ميلان ornare أوديو sagittis الحوار الاقتصادي الاستراتيجي. Donec السيرة ullamcorper بوروس. Vivamus غير metus ميلان خوستو بورتا volutpat. </ P> <P> Vivamus ماتيس accumsan erat، فيل convallis RISUS pretium اللجنة الوطنية للانتخابات. صحيح نونك ولا عقوبة، viverra التحرير ووزارة شؤون المرأة غير، scelerisque vehicula arcu. Fusce bibendum convallis augue الجلوس امات lobortis. كالات التصنيف الائتماني بورتا URNA turpis، sodales lobortis بوروس adipiscing الهوية. Maecenas ullamcorper، turpis suscipit fringilla pellentesque، ماسا lacus شحم ميل ، غير المصنفة في موضع dignissim velit arcu eget بوروس. نام في تيلوس dapibus، eget euismod nisl. أوت eget venenatis سابين. Vivamus vulputate فريوس mauris، فيل فريوس nisl facilisis ميلان. لا عقوبة aliquet خوستو على nibh ornare، الاتحاد الأوروبي congue neque rutrum. </ P> <P> Suspendisse لأورسي facilisis، dignissim tortor الذاتية، ultrices ميل. دهليز على iaculis lacus. Phasellus السيرة convallis ligula، غير المصنفة في موضع volutpat تيلوس. Vivamus scelerisque موليس nisl، غير المصنفة في موضع vehicula إيليت egestas أ. ااا luctus metus معرف ميل حامل؛ حبلى، faucibus convallis neque pretium. Maecenas quis سابين التحرير ليو fringilla tempor السيرة الجلوس امات ليو. Donec imperdiet تيمبوس placerat. Pellentesque شحم ultrices نونك ااا ultrices. مرضي فيل ميل pretium، خميرة lacus وآخرون، viverra تيلوس. Phasellus sodales يبيرو convallis غير المصنفة في موضع وثيقة الهوية الوحيدة، والجلوس امات خميرة سابين auctor . دهليز ما قبل هوز بريمس في faucibus أورسي luctus آخرون ultrices الاستفسار cubilia Curae ؛. سد الاتحاد الأوروبي elementum nibh، quis فريوس يبيرو </ P> <P> مرضي الحوار الاقتصادي الاستراتيجي خميرة هوز. مرضي لأورسي vulputate tortor ornare blandit على quis أورسي. Donec aliquam sodales حامل؛ حبلى. وفي التحرير ullamcorper احترازيا، ميلان pretium velit. دهليز السيرة LECTUS volutpat، consequat أبجد الجلوس امات، شحم تيلوس. وفي tincidunt فيل ليو eget شحم. Curabitur لاروس غير lacus aliquam malesuada. Praesent آخرون تيمبوس أوديو. صحيح على نونك quam. في مفوضية العمل الانساني dictumst habitasse platea. aliquam بورتا nibh لا عقوبة، وآخرون ماتيس turpis placerat eget. pellentesque دوى بقطر، pellentesque فيل حامل؛ حبلى الهوية، accumsan الاتحاد الأوروبي ماجنا . (سيد) وarcu سمبر، التحرير dignissim ليو. </ P> <P> سد السيرة lobortis بقطر، معرف molestie ماجنا. Aliquam consequat هوز quis بتوقيت شرق الولايات المتحدة القول المأثور ultrices. velit Aenean nibh، fringilla في معرف بقطر، blandit hendrerit lacus. Donec vehicula rutrum تيلوس eget خميرة. Pellentesque ميلان erat آخرون arcu ornare tincidunt. erat Aliquam volutpat. Vivamus lobortis URNA quis حامل؛ حبلى سمبر . وفي condimentum، طبقا لتقديرات وfaucibus luctus، ميل ميل دولور CURSUS، معرف vehicula arcu تكشيرة على nibh. Pellentesque blandit سابين lacus، فيل vehicula نونك feugiat الجلوس امات. </ P> </ div> </ div> </ div> </ الجسم> </ HTML>

    محاولة »

    وكانت النتائج على النحو التالي:

    الملاحة إضافي (يضعوا) سد العجز في جافا سكريبت

من خلال المواقع CSS

في المذكورين أعلاه مع الملاحة إضافي (يضعوا) وضع المكونات، عليك أن تذهب من خلال محتوى CSS لتحديد المواقع. الملاحة إضافي (يضعوا) سد العجز في تبديل بين الطبقة ثلاثة، وقد أظهرت كل فئةدولة معينة:.affix، .affix أعلىو.affix القاع.اتبع هذه الخطوات لإنشاء CSS الخاص بك لهذه الدول الثلاث (لا تعتمد على هذا البرنامج المساعد).

  • في البداية، إضافة عنصرالمكونات .affix أعلى للإشارة إلى العلوي موقفها.هذه المرة لا يتطلب أي المواقع CSS.
  • عند التمرير من خلال إضافة الملاحة إضافي (يضعوا) عناصر، ينبغي أن تؤدي إلى الملاحة الإضافي الفعلي (يضعوا). عند هذه النقطة.affix سيحل محل .affix أعلى،وموقف مجموعة: ثابت، (المقدمة من رمز المغلق التمهيد).
  • إذا قمت بتعريف الجزء السفلي من الإزاحة، عندما التمرير الوصول إلى هذا الموقف يجب أن.affix استبدال .affix القاع.منذ الإزاحة هو اختياري، إذا قمت بتعيين مطلوب في الوقت نفسه تعيين CSS المناسب الإزاحة. في هذه الحالة، إضافةالموقف عند الضرورة: المطلق؛.

خيارات

هناك بعض الخيارات من خلال سمات البيانات أو جافا سكريبت لتمرير. يسرد الجدول التالي هذه الخيارات:

选项名称类型/默认值Data 属性名称描述
offsetnumber | function | object
默认值:10
data-offset当计算滚动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。