बूस्ट्रैप 5 स्क्रॉलस्पाई

स्क्रोलस्पाई

स्क्रोलस्पाई इसके अनुसार प्रयोग करता हैस्क्रोलस्थान स्वचालित नेविगेशन सूची में लिंक अपडेट करता है。

कैसे Scrollspy बनाया जाता है

इस उदाहरण में Scrollspy कैसे बनाया जाता है दिखाया जाता है:

उदाहरण

<!-- सर्कल क्षेत्र -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- नेविगेशन बार - <a> एलीमेंट एक सर्कल क्षेत्र के किसी हिस्से को जाने के लिए उपयोग किया जाता है -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">सेक्शन 1</a></li>
    ...
</nav>
<!-- सेक्शन 1 -->
<div id="section1">
  <h1>सेक्शन 1</h1>
  <p>इस पृष्ठ को सर्कल करें और सर्कल के दौरान नेविगेशन बार को देखें!</p>
</div>
...
</body>

स्वयं प्रयोग करें

उदाहरण बताया जाता है

को जोड़ा जाता है data-bs-spy="scroll" सर्कल क्षेत्र के रूप में उपयोग किए जाने वाले एलीमेंट (आमतौर पर) को जोड़ें <body> )

फिर एलीमेंट जोड़ें data-bs-target एट्रिब्यूट के लिए जिसका मान id या नेविगेशन बार की क्लास नाम है (.navbar)। यह यह सुनिश्चित करने के लिए है कि नेविगेशन बार और सर्कल क्षेत्र के बीच संबंध हो।

ध्यान दें कि सर्कल एलीमेंट को नेविगेशन बार के सूची आइटम के लिंक ID के साथ मेल खाना चाहिए (<div id="section1"> सम्मिलित <a href="#section1">)

वैकल्पिक data-bs-offset एट्रिब्यूट को सामग्री की सर्कल टिप्पणी के समय से ऊपर की दूरी पिक्सल में निर्दिष्ट करता है। जब नेविगेशन बार में लिंक एक सर्कल एलीमेंट को जाने के लिए जाता है और आपको लगता है कि आक्टिव स्थिति जल्दी बदल गई है, तो यह बहुत उपयोगी है। मूलभूत मान 10 पिक्सल है。

निर्दिष्ट करने की आवश्यकता हैदृष्टि बदलने के लिए data-bs-spy="scroll" वाले एलीमेंट को CSS पोजीशन सामग्री का मान "relative" के रूप में सेट करना आवश्यक है ताकि यह सही तरीके से काम करे。