Scrollspy
व्ह्यूपोर्टमध्ये सध्या कोणता दुवा सक्रिय आहे हे सूचित करण्यासाठी स्क्रोल स्थितीवर आधारित बूटस्ट्रॅप नेव्हिगेशन किंवा सूची गट घटक स्वयंचलितपणे अद्यतनित करा.
हे कसे कार्य करते
Scrollspy योग्यरित्या कार्य करण्यासाठी काही आवश्यकता आहेत:
- जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहे
util.js. - ते बूटस्ट्रॅप एनएव्ही घटक किंवा सूची गटावर वापरले जाणे आवश्यक आहे .
- Scrollspy ला
position: relative;तुम्ही ज्या घटकाची हेरगिरी करत आहात त्याची आवश्यकता असते, सहसा<body>. - च्या व्यतिरिक्त इतर घटकांवर हेरगिरी करताना , एक सेट आणि लागू
<body>असल्याची खात्री करा .heightoverflow-y: scroll; - अँकर (
<a>) आवश्यक आहेत आणि त्यासह घटकाकडे निर्देश करणे आवश्यक आहेid.
यशस्वीरित्या अंमलात आणल्यावर, तुमचा एनएव्ही किंवा सूची गट त्यानुसार अपडेट होईल, .activeत्यांच्या संबंधित लक्ष्यांच्या आधारावर वर्ग एका आयटमवरून दुसर्‍याकडे हलवेल.
नवबारमधील उदाहरण
navbar खालील क्षेत्र स्क्रोल करा आणि सक्रिय वर्ग बदल पहा. ड्रॉपडाउन आयटम देखील हायलाइट केले जातील.
@फॅट
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.
@mdo
वेनिअम मारफा मिश्या स्केटबोर्ड, अॅडिपिसिसिंग फ्यूगिएट वेलीट पिचफोर्क दाढी. फ्रीगन दाढी अलिक्वा कपिडॅटॅट मॅकस्वीनीचा वेरो. क्युपिडाट चार लोको निसी, ईए हेल्वेटिका नुल्ला कार्ल्स. टॅटू कॉस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl. लो-फाय वेस अँडरसन +1 सारटोरियल. कार्लेस नॉन एस्थेटिक एक्सरसिटेशन quis gentrify. ब्रुकलिन अॅडिपिसिसिंग क्राफ्ट बिअर व्हाइस कीटार डेझरंट.
एक
Occaecat commodo aliqua delectus. फॅप क्राफ्ट बिअर डेझरंट स्केटबोर्ड ईए. लोमो सायकल राइट्स अॅडिपिसिसिंग बॅन मी, वेलीट ईए सन नेक्स्ट लेव्हल लोकाव्होर सिंगल-ओरिजिन कॉफी इन मॅग्ना व्हेनिअम. हाय लाइफ आयडी विनाइल, इको पार्क कॉन्सेक्वॅट क्विस अलिक्विप बॅन मी पिचफोर्क. व्हेरो व्हीएचएस हे ऍडिपिसिसिंग आहे. DIY किमान मेसेंजर बॅग कनेक्ट करा. क्रेडिट एक्स इन, शाश्वत डिलेक्टस कॉन्सेक्टुर फॅनी पॅक आयफोन.
दोन
इनसिडिडंट इको पार्कमध्ये, ऑफिशिया डेझरंट मॅकस्वेनीचे प्रोडेंट मास्टर क्लीन्स थंडरकॅट्स सेपिएंट व्हेनिअम. व्हीएचएस एलिट, प्रोडेंट शोरडिच +1 बायोडिझेल लेबरम क्राफ्ट बिअर वगळता. सिंगल-ओरिजिन कॉफी वेफेअर्स इरूर फोर लोको, कपिडाटॅट टेरी रिचर्डसन मास्टर क्लीन्स. गृहीत धरा की तुम्ही कदाचित त्यांच्याबद्दल आर्ट पार्टी फॅनी पॅक, टॅटू नुला कार्डिगन टेम्पर जाहिरात ऐकली नसेल. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. एलिट वुल्फ व्होलप्टेट, लो-फाय ईए पोर्टलँड यांनी चार लोको विकण्यापूर्वी. Locavore enim nostrud mlkshk brooklyn nesciunt.
तीन
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi ते विकले जाण्यापूर्वी. Tumblr फार्म-टू-टेबल सायकल अधिकार काहीही असो. Anim keffiyeh carles cardigan. Velit seitan mcsweeney चे फोटो बूथ 3 wolf moon irure. Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल आणि कार्डिगन ट्रस्ट फंड कल्पा बायोडिझेल वेस एंडरसन सौंदर्यशास्त्र. निहिल टॅटू अक्यूसमस, क्रेड आयरनी बायोडिझेल केफीयेह कारागीर उल्लामको परिणाम.
Keytar twee ब्लॉग, culpa मेसेंजर बॅग marfa जे काही delectus अन्न ट्रक. Sapiente synth id गृहीत धरा. Locavore sed helvetica cliche irony, thundercats तुम्ही कदाचित त्यांच्याबद्दल ऐकले नसेल हूडी ग्लूटेन-फ्री lo-fi fap aliquip. टेरी रिचर्डसन प्रॉडेंट ब्रंच नेसियंट क्विस कॉस्बी स्वेटर पॅरियातूर केफियेह यूट हेल्वेटिका आर्टिसन म्हणून विकल्या जाण्यापूर्वी कामगार एलिट प्लेसॅट. कार्डिगन क्राफ्ट बिअर सीटन रेडीमेड वेलीट. व्हीएचएस चेंब्रे श्रमिक टेम्पर व्हेनिअम. अनिम मॉलिट मिनिम कमोडो उल्लाम्को गडगडाट.
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#fat">@fat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mdo">@mdo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#one">one</a>
<a class="dropdown-item" href="#two">two</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#three">three</a>
</div>
</li>
</ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
<h4 id="fat">@fat</h4>
<p>...</p>
<h4 id="mdo">@mdo</h4>
<p>...</p>
<h4 id="one">one</h4>
<p>...</p>
<h4 id="two">two</h4>
<p>...</p>
<h4 id="three">three</h4>
<p>...</p>
</div>नेस्टेड nav सह उदाहरण
Scrollspy नेस्टेड .navs सह देखील कार्य करते. जर घरटे असेल तर .navत्याचे .activeपालक देखील असतील .active. नवबारच्या पुढ��ल भागात स्क्रोल करा आणि सक्रिय वर्ग बदल पहा.
आयटम 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore करा. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut resultat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
आयटम 1-1
Amet tempor mollit aliquip paraiatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. सिट प्रोडेंट उल्लाम्को ऑट मॅग्ना परियातुर नोस्ट्रड लेबर. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. एनिम एलिक्विप एक्सरसिटेशन उल्लॅमको अॅडिपिसिसिंग व्होल्पटेट अपवाद वगळता किमान कमोडो अॅडिपिसिसिंग एक्सरसिटेशन ऑफिशिया निसी अॅडिपिसिसिंग. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
आयटम 1-2
Cillum nisi deserunt Magna eiusmod qui eiusmod velit voluptate paraiatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisising magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. अ‍ॅनिम ऑकेकेट nulla in non consequat eiusmod velit incididunt.
आयटम 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. हे भूतपूर्व संयुक्‍त मोल्‍लिट वॉल्‍युप्‍टेट ज्‍यामध्‍ये आहे. इन्सिडिडंट व्हेनिअम वेलीट एलिट एलिट व्हेनिअम लोरेम एलिक्वा क्विस उल्लामको डेझरंट सिट एनिम एलिट एलिक्वा एसे इर्युर. Laborum nisi sit est est est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est conectetur ipsum commodo tempor in proident.
आयटम 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
आयटम 3-1
Deserunt quis elit Lorem eiusmod amet enim enim amet किमान Lorem proident nostrud. ईए आयडी डोलोरे एनीम एक्सरसिटेशन ऑट फ्यूगिएट लेबर वोल्पटेट सिलम डो लेबरिस लेबर. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
आयटम 3-2
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minimum enim sunt reprehenderit exercitation cupidatat et do official. Aliquip consequat ad labore labore mollit ut amet. वेनिअम कुल्पा एलिक्वा एक्स्पेचर एलिट मॅग्ना फ्यूगियाट इयुसमोड अमेट ऑफिसमध्ये बसा
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>सूची-गटासह उदाहरण
Scrollspy देखील .list-groups सह कार्य करते. सूची गटाच्या पुढील भागात स्क्रोल करा आणि सक्रिय वर्ग बदल पहा.
आयटम 1
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore करा. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut resultat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
आयटम 2
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. हे भूतपूर्व संयुक्‍त मोल्‍लिट वॉल्‍युप्‍टेट ज्‍यामध्‍ये आहे. इन्सिडिडंट व्हेनिअम वेलीट एलिट एलिट व्हेनिअम लोरेम एलिक्वा क्विस उल्लामको डेझरंट सिट एनिम एलिट एलिक्वा एसे इर्युर. Laborum nisi sit est est est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est conectetur ipsum commodo tempor in proident.
आयटम 3
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
आयटम 4
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1">Item 1</h4>
<p>...</p>
<h4 id="list-item-2">Item 2</h4>
<p>...</p>
<h4 id="list-item-3">Item 3</h4>
<p>...</p>
<h4 id="list-item-4">Item 4</h4>
<p>...</p>
</div>वापर
डेटा विशेषतांद्वारे
तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्ही ज्या घटकावर टेहळणी करू इच्छिता त्यात जोडा (बहुधा हे असेल <body>). data-targetनंतर कोणत्याही बूटस्ट्रॅप घटकाच्या मूळ घटकाच्या ID किंवा वर्गासह विशेषता जोडा .nav.
body {
position: relative;
}<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>JavaScript द्वारे
तुमच्या CSS मध्ये जोडल्यानंतर position: relative;, JavaScript द्वारे scrollspy ला कॉल करा:
$('body').scrollspy({ target: '#navbar-example' })निराकरण करण्यायोग्य आयडी लक्ष्य आवश्यक आहेत
नवबार लिंक्समध्ये निराकरण करण्यायोग्य आयडी लक्ष्य असणे आवश्यक आहे. उदाहरणार्थ, <a href="#home">home</a>DOM मधील एखाद्या गोष्टीशी संबंधित असणे आवश्यक आहे जसे की <div id="home"></div>.
:visibleलक्ष्य नसलेल्या घटकांकडे दुर्लक्ष केले
:visiblejQuery नुसार नसलेल्या लक्ष्य घटकांकडे दुर्लक्ष केले जाईल आणि त्यांच्याशी संबंधित एनएव्ही आयटम कधीही हायलाइट केले जाणार नाहीत.
पद्धती
.scrollspy('refresh')
DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
}).scrollspy('dispose')
घटकाची स्क्रोलस्पाय नष्ट करते.
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset="".
| नाव | प्रकार | डीफॉल्ट | वर्णन |
|---|---|---|---|
| ऑफसेट | संख्या | 10 | स्क्रोलच्या स्थितीची गणना करताना वरून ऑफसेट करण्यासाठी पिक्सेल. |
| पद्धत | स्ट्रिंग | ऑटो | हेरलेला घटक कोणत्या विभागात आहे ते शोधते. autoस्क्रोल निर्देशांक मिळविण्यासाठी सर्वोत्तम पद्धत निवडेल. offsetस्क्रोल निर्देशांक मिळविण्यासाठी jQuery ऑफसेट पद्धत वापरेल. positionस्क्रोल निर्देशांक मिळविण्यासाठी jQuery स्थिती पद्धत वापरेल. |
| लक्ष्य | स्ट्रिंग | jQuery ऑब्जेक्ट | DOM घटक | Scrollspy प्लगइन लागू करण्यासाठी घटक निर्दिष्ट करते. |
कार्यक्रम
| कार्यक्रमाचा प्रकार | वर्णन |
|---|---|
| activate.bs.scrollspy | जेव्हा जेव्हा स्क्रोलस्पाय द्वारे नवीन आयटम सक्रिय होतो तेव्हा हा कार्यक्रम स्क्रोल घटकावर सक्रिय होतो. |
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
// do something...
})