बूटस्ट्रैप 4 स्क्रॉलस्पी (उन्नत)
बूटस्ट्रैप 4 स्क्रॉलस्पाई
स्क्रॉल स्थिति के आधार पर नेविगेशन सूची में लिंक को स्वचालित रूप से अपडेट करने के लिए स्क्रॉलस्पी का उपयोग किया जाता है ।
स्क्रॉलस्पाई कैसे बनाएं
निम्न उदाहरण दिखाता है कि स्क्रॉलस्पाई कैसे बनाया जाता है:
उदाहरण
<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
उदाहरण समझाया गया
उस तत्व में जोड़ें data-spy="scroll"जिसे स्क्रॉल करने योग्य क्षेत्र के रूप में उपयोग किया जाना चाहिए (अक्सर यह <body>तत्व होता है)।
फिर आईडी के मान या नेविगेशन बार ( ) data-targetके वर्ग नाम के साथ विशेषता जोड़ें। .navbarयह सुनिश्चित करने के लिए है कि नेवबार स्क्रॉल करने योग्य क्षेत्र से जुड़ा है।
<div id="section1">ध्यान दें कि स्क्रॉल करने योग्य तत्वों को नेवबार की सूची आइटम ( मैच <a href="#section1">) के अंदर लिंक की आईडी से मेल खाना चाहिए ।
वैकल्पिक data-offsetविशेषता स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिए पिक्सेल की संख्या निर्दिष्ट करती है। यह तब उपयोगी होता है जब आपको लगता है कि स्क्रॉल करने योग्य तत्वों पर कूदते समय नेवबार के अंदर के लिंक सक्रिय स्थिति को बहुत जल्दी या बहुत जल्दी बदल देते हैं। डिफ़ॉल्ट 10 पिक्सेल है।
सापेक्ष स्थिति की आवश्यकता है: डेटा-स्पाई = "स्क्रॉल" वाले तत्व को ठीक से काम करने के लिए "रिश्तेदार" के मूल्य के साथ सीएसएस स्थिति संपत्ति की आवश्यकता होती है।
स्क्रॉलस्पी वर्टिकल मेनू
इस उदाहरण में, हम मेनू के रूप में बूटस्ट्रैप की लंबवत नेविगेशन गोलियों का उपयोग करते हैं:
उदाहरण
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
पूर्ण बूटस्ट्रैप स्क्रॉलस्पी संदर्भ
सभी स्क्रॉलस्पी विकल्पों, विधियों और घटनाओं के पूर्ण संदर्भ के लिए, हमारे बूटस्ट्रैप जेएस स्क्रॉलस्पी संदर्भ पर जाएं ।