बूटस्ट्रैप जे एस स्क्रॉलस्पाई
जेएस स्क्रॉलस्पी (स्क्रॉलस्पी.जेएस)
स्क्रॉल स्थिति के आधार पर नेविगेशन सूची में लिंक को स्वचालित रूप से अपडेट करने के लिए स्क्रॉलस्पी प्लगइन का उपयोग किया जाता है।
स्क्रॉलस्पी के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप स्क्रॉलस्पी ट्यूटोरियल पढ़ें ।
युक्ति: स्क्रॉलस्पी प्लगइन अक्सर एफ़िक्स प्लगइन के साथ प्रयोग किया जाता है ।
डेटा के माध्यम से-* विशेषताएँ
उस तत्व में जोड़ें data-spy="scroll"जिसे स्क्रॉल करने योग्य क्षेत्र के रूप में उपयोग किया जाना चाहिए (अक्सर यह <body>तत्व होता है)।
फिर आईडी के मान या नेविगेशन बार ( ) data-targetके वर्ग नाम के साथ विशेषता जोड़ें। .navbarयह सुनिश्चित करने के लिए है कि नेवबार स्क्रॉल करने योग्य क्षेत्र से जुड़ा है।
<div id="section1">ध्यान दें कि स्क्रॉल करने योग्य तत्वों को नेवबार की सूची आइटम ( मैच <a href="#section1">) के अंदर लिंक की आईडी से मेल खाना चाहिए ।
वैकल्पिक data-offsetविशेषता स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिए पिक्सेल की संख्या निर्दिष्ट करती है। यह तब उपयोगी होता है जब आपको लगता है कि स्क्रॉल करने योग्य तत्वों पर कूदते समय नेवबार के अंदर के लिंक सक्रिय स्थिति को बहुत जल्दी या बहुत जल्दी बदल देते हैं। डिफ़ॉल्ट 10 पिक्सेल है।
सापेक्ष स्थिति की आवश्यकता है: डेटा-स्पाई = "स्क्रॉल" वाले तत्व को ठीक से काम करने के लिए "रिश्तेदार" के मूल्य के साथ सीएसएस स्थिति संपत्ति की आवश्यकता होती है।
उदाहरण
<!-- 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-inverse navbar-fixed-top">
...
<ul class="nav
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>
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
$('body').scrollspy({target: ".navbar"})
स्क्रॉलस्पी विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-ऑफ़सेट = "" में है।
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
स्क्रॉलस्पी तरीके
निम्न तालिका सभी उपलब्ध स्क्रोलस्पाई विधियों को सूचीबद्ध करती है।
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
स्क्रॉलस्पी घटनाएँ
निम्न तालिका सभी उपलब्ध स्क्रॉलस्पी घटनाओं को सूचीबद्ध करती है।
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
और ज्यादा उदाहरण
एनिमेटेड स्क्रॉल के साथ स्क्रॉलस्पाई
एक ही पृष्ठ पर एक एंकर के लिए एक सहज पृष्ठ स्क्रॉल कैसे जोड़ें:
स्मूद स्क्रॉलिंग
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
स्क्रॉलस्पी और एफिक्स
स्क्रॉलस्पाई प्लगइन के साथ एफिक्स प्लगइन का उपयोग करना :
क्षैतिज मेनू (नवबार)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
लंबवत मेनू (सिडनेव)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>