in English

स्क्रॉलस्पी

स्वयमेव Bootstrap नेविगेशनं अथवा स्क्रॉलस्थानस्य आधारेण सूचीसमूहघटकानाम् अद्यतनीकरणं कुर्वन्तु यत् सूचयति यत् दृश्यपोर्टे वर्तमानसमये कोऽपि लिङ्कः सक्रियः अस्ति ।

कथं कार्यं करोति

Scrollspy इत्यस्य सम्यक् कार्यं कर्तुं कतिपयानि आवश्यकतानि सन्ति:

  • यदि भवान् अस्माकं जावास्क्रिप्ट् स्रोततः निर्माति तर्हि तस्य आवश्यकताutil.js अस्ति .
  • तस्य उपयोगः Bootstrap nav घटके अथवा सूचीसमूहे अवश्यं करणीयः |
  • Scrollspy इत्यस्य आवश्यकता position: relative;अस्ति यस्मिन् तत्त्वे भवन्तः जासूसीं कुर्वन्ति, प्रायः <body>.
  • , इत्यस्मात् परं तत्त्वानि गुप्तचर्यायां <body>, अवश्यमेव heightसेट् कृत्वा overflow-y: scroll;प्रयुक्तं कुर्वन्तु ।
  • लंगराः ( <a>) आवश्यकाः सन्ति , तेन सह एकं तत्त्वं सूचयितव्यम् id|

यदा सफलतया कार्यान्वितं भवति तदा भवतः nav अथवा सूचीसमूहः तदनुसारं अद्यतनं करिष्यति, .activeतेषां सम्बद्धलक्ष्याणां आधारेण वर्गं एकस्मात् द्रव्यात् परं द्रव्यं प्रति स्थानान्तरयिष्यति ।

नवबार में उदाहरण

navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप्-डाउन-वस्तूनि अपि प्रकाशितानि भविष्यन्ति ।

@स्थूलः

scrollspy उदाहरणार्थं स्थानधारकसामग्री। भवता उत्तमं वास्तुकला प्राप्तम्। पासपोर्ट स्टाम्प, सा विश्वव्यापी अस्ति। सूक्ष्म, ताजा, उग्र, वयं ताले प्राप्तवन्तः। कदापि योजना न कृतवान् यत् एकस्मिन् दिने अहं भवन्तं हास्यामि इति। सा भवतः हृदयं बहिः खादति। तव चुम्बनं ब्रह्माण्डीयम्, प्रत्येकं चालनं जादू अस्ति। तानि इत्यर्थः, सा एव इव इत्यर्थः। नमस्कार प्रियजनाः आवाम् यात्रां कुर्मः। केवलं जुलैमासस्य ४ दिनाङ्कवत् रात्रौ स्वामित्वं भवतु! परन्तु भवन्तः अपव्ययः भवितुं रोचन्ते।

@मडो

scrollspy उदाहरणार्थं स्थानधारकसामग्री। 'कारणं सा म्यूजः कलाकारः च अस्ति।' (एवं वयं कुर्मः) अतः भवन्तः जादूना सह क्रीडितुं इच्छन्ति। अतः केवलं सुनिश्चितं कुरुत यत् भवन्तः मम सर्वं दातुं पूर्वं। अहं गच्छामि, अहं वायुमार्गेण गच्छामि (अद्य रात्रौ)। वार्तालापं त्यजतु, सर्वं श्रुतवान्, पादचालनं गन्तुं समयः।

एकम्‌

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

scrollspy उदाहरणार्थं स्थानधारकसामग्री। यदि त्वं नृत्यं कर्तुम् इच्छसि, यदि त्वं सर्वं इच्छसि, तर्हि त्वं जानासि यत् अहं सा ​​बालिका अस्मि यत् त्वं आह्वनीया। तूफानस्य माध्यमेन गच्छामि अहं करिष्यामि। अतः अहं भवन्तं भवतः जन्मदिनसूटं धारयामि। यः दूरं गतः । गतशुक्रवासरे रात्रौ, आम् अहं मन्ये वयं नियमं भङ्गं कृतवन्तः, सर्वदा वदामः यत् वयं स्थगयिष्यामः। 'कारणं सा किञ्चित् योको, अपि च सा किञ्चित् 'अहो न'। अहं इच्छामि जबड़ा droppin ', नेत्र poppin ', शिरः turnin ', शरीर shockin '. आम्, वयं अस्माकं क्रेडिट् कार्ड्स् मैक्सं कृत्वा बारात् बहिः निष्कासिताः अभवम।

तथा च किञ्चित् अधिकं स्थानधारकसामग्री, उत्तममापनार्थम्।

<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-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>

nested nav इत्यनेन सह उदाहरणम्

Scrollspy अपि nested .navs इत्यनेन सह कार्यं करोति । यदि नेस्टेड् .navअस्ति .activeतर्हि तस्य मातापितरौ अपि भविष्यन्ति .active| navbar इत्यस्य पार्श्वे स्थितं क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु ।

मद 1

scrollspy उदाहरणार्थं स्थानधारकसामग्री। This one relates to item 1. भवन्तं माइल ऊर्ध्वं, एतावत् उच्चं नेति, 'कारणं सा तत् एकं अन्तर्राष्ट्रीयं स्मितं प्राप्तवती अस्ति।' मम शयने एकः अपरिचितः अस्ति, मम शिरसि एकः प्रहारः अस्ति। अहो न । अन्यस्मिन् जीवने अहं भवन्तं स्थातुं करिष्यामि। 'कारणं अहं, अहं किमपि कर्तुं समर्थः अस्मि।' मम मुकुटयुद्धाय उपयुक्तः। मातापितृणां मद्यं चोरयित्वा छतम् आरोहयितुं प्रयुक्तम्। टोन, तन फिट एंड रेडी, टर्न इट अप क्योज इट्स gettin 'हेवी। तस्याः प्रेम औषधवत् अस्ति। अनुमानं करोमि यत् अहं विस्मृतवान् मम विकल्पः अस्ति।

मद 1-1

scrollspy उदाहरणार्थं स्थानधारकसामग्री। अयं १-१ इति द्रव्यसम्बद्धः । भवता उत्तमं वास्तुकला प्राप्तम्। पासपोर्ट स्टाम्प, सा विश्वव्यापी अस्ति। सूक्ष्म, ताजा, उग्र, वयं ताले प्राप्तवन्तः। कदापि योजना न कृतवान् यत् एकस्मिन् दिने अहं भवन्तं हास्यामि इति। सा भवतः हृदयं बहिः खादति। तव चुम्बनं ब्रह्माण्डीयम्, प्रत्येकं चालनं जादू अस्ति। तानि इत्यर्थः, सा एव इव इत्यर्थः। नमस्कार प्रियजनाः आवाम् यात्रां कुर्मः। केवलं जुलैमासस्य ४ दिनाङ्कवत् रात्रौ स्वामित्वं भवतु! परन्तु भवन्तः अपव्ययः भवितुं रोचन्ते।

मद 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

scrollspy उदाहरणार्थं स्थानधारकसामग्री। अयं ३-२ द्रव्येण सह सम्बद्धः अस्ति । त्वं मौलिकः असि, प्रतिस्थापयितुं न शक्यते। सर्वाम् रात्रौ ते वादयन्ति, भवतः गीतम्। कैलिफोर्निया बालिकाः वयं अनिर्वचनीयाः स्मः। यथा पञ्जरं विना पक्षी। इदानीं भयं नास्ति, मुञ्च मुक्तः एव भव, अहं भवन्तं निःशर्तं प्रेम करिष्यामि। भित्तिस्थं लेखनं द्रष्टुं शक्नोमि। भवन्तः जगत् भ्रमणं कर्तुं शक्नुवन्ति स्म किन्तु सुवर्णतटस्य समीपं किमपि न आगच्छति।

<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>

list-group इत्यनेन सह उदाहरणम्

Scrollspy अपि .list-groups इत्यनेन सह कार्यं करोति । सूचीसमूहस्य पार्श्वे स्थितं क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गपरिवर्तनं पश्यन्तु ।

मद 1

scrollspy list-group उदाहरणार्थं स्थानधारकसामग्री। एषः एकः मदेन सह सम्बद्धः अस्ति क्षमायाचनायाः आवश्यकता नास्ति। इदानीं भयं नास्ति, मुञ्च मुक्तः एव भव, अहं भवन्तं निःशर्तं प्रेम करिष्यामि। गतशुक्रवासरे रात्रौ। मा लज्जालुः किञ्चित् वयस्कः भवतु अहं शर्तं स्थापयामि यत् इदं सुन्दरम् अस्ति। उच्चविद्यालयस्य अनन्तरं ग्रीष्मकालः यदा वयं प्रथमवारं मिलितवन्तः। 'कारणं सा म्यूजः कलाकारः च अस्ति।' किम्‌? प्रतीक्षतु। अपवादोऽहमिति चिन्तितवान्।

मद 2

scrollspy list-group उदाहरणार्थं स्थानधारकसामग्री। This one relates to item 2. आम्, सा स्वस्य ताडनेन नृत्यति। अहो न । त्वं महत्तमः भवितुम् अर्हति स्म। 'कारणं शिशु, त्वं आतिशबाजी असि।' कदाचित् सर्वे द्वाराणि पिहिताः इति कारणम्। हृदयं उद्घाट्य केवलं आरम्भं कुरुत। अतः très chic, आम्, सा एकः क्लासिकः अस्ति।

मद 3

scrollspy list-group उदाहरणार्थं स्थानधारकसामग्री। इदं एकं मदं 3. वयं उच्चतरं उच्चतरं गच्छामः। न कदापि एकं विना अन्येन, वयं सम्झौतां कृतवन्तः। अहं वायुमार्गेण गच्छामि। कश्चन अवदत् यत् भवतः टैटू निष्कासितम् अस्ति। इदानीं अहं भृङ्ग इव प्लवमानः अस्मि। टोन, तन फिट एंड रेडी, टर्न इट अप क्योज इट्स gettin 'हेवी। कारण एकदा त्वं मम, एकदा त्वं मम। त्वं केवलं प्रकाशं प्रज्वलितुं गच्छसि तथा च तत् प्रकाशयतु! अतः वयं बौलेवार्डं मारयामः। किं भवन्तः कदापि अनुभवन्ति, एतावत् कागदं कृशं अनुभवन्ति। अहं सर्वं पश्यामि, इदानीं पश्यामि।

मद ४

scrollspy list-group उदाहरणार्थं स्थानधारकसामग्री। This one relates to item 4. उच्चविद्यालयस्य अनन्तरं ग्रीष्मकालः यदा वयं प्रथमवारं मिलितवन्तः। इदानीं भयं नास्ति, मुञ्च मुक्तः एव भव, अहं भवन्तं निःशर्तं प्रेम करिष्यामि। सूर्य-चुम्बितत्वक् एतावत् उष्णं वयं भवतः पॉप्सिकलं द्रवयिष्यामः। एषः प्रेम भवन्तं उच्छ्वासं कर्तुं प्रेरयिष्यति।

<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>

प्रयोगः

डेटा विशेषताओं के माध्यम से

स्वस्य topbar नेविगेशनं प्रति scrollspy व्यवहारं सुलभतया योजयितुं, data-spy="scroll"यस्मिन् तत्त्वं गुप्तचरयितुम् इच्छति तस्मिन् तत्त्वे योजयन्तु (अधिकांशतः एतत् स्यात् <body>) । data-targetततः कस्यापि Bootstrap .navघटकस्य parent element इत्यस्य ID अथवा class इत्यनेन सह attribute योजयन्तु ।

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>

जावास्क्रिप्ट् मार्गेण

स्वस्य CSS मध्ये योजयित्वा position: relative;जावास्क्रिप्ट् मार्गेण scrollspy आह्वयन्तु :

$('body').scrollspy({ target: '#navbar-example' })

समाधानयोग्य आईडी लक्ष्य आवश्यक है

नवबार लिङ्केषु समाधानयोग्याः id लक्ष्याणि भवितुमर्हन्ति । यथा, a <a href="#home">home</a>इत्यस्य DOM इत्यस्मिन् किमपि अनुरूपं भवितुमर्हति यथा <div id="home"></div>.

अ- :visibleलक्ष्य तत्वों को उपेक्षित किया गया

:visiblejQuery इत्यस्य अनुसारं न सन्ति ये लक्ष्यतत्त्वानि उपेक्षितानि भविष्यन्ति तथा च तेषां तत्सम्बद्धानि nav वस्तूनि कदापि प्रकाशितानि न भविष्यन्ति ।

विधियाँ

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you’ll need to call the refresh method like so:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Destroys an element’s scrollspy.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name Type Default Description
offset number 10 Pixels to offset from top when calculating position of scroll.
method string auto Finds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use jQuery offset method to get scroll coordinates. position will use jQuery position method to get scroll coordinates.
target string | jQuery object | DOM element Specifies element to apply Scrollspy plugin.

Events

Event Type Description
activate.bs.scrollspy यदा कदापि नूतनं द्रव्यं scrollspy द्वारा सक्रियं भवति तदा एषा घटना स्क्रॉल-तत्त्वे प्रज्वालयति । 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})