ਸਕ੍ਰੌਲਸਪੀ

ਸਕ੍ਰੌਲ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਬੂਟਸਟਰੈਪ ਨੈਵੀਗੇਸ਼ਨ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਭਾਗਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਅਪਡੇਟ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਦਰਸਾਉਣ ਲਈ ਕਿ ਵਿਊਪੋਰਟ ਵਿੱਚ ਇਸ ਸਮੇਂ ਕਿਹੜਾ ਲਿੰਕ ਕਿਰਿਆਸ਼ੀਲ ਹੈ।

ਕਿਦਾ ਚਲਦਾ

Scrollspy ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਕੁਝ ਲੋੜਾਂ ਹਨ:

ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈutil.js ।
ਇਹ ਇੱਕ ਬੂਟਸਟਰੈਪ nav ਭਾਗ ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਵਿੱਚ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ।
Scrollspy ਨੂੰ position: relative;ਉਸ ਤੱਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਿਸਦੀ ਤੁਸੀਂ ਜਾਸੂਸੀ ਕਰ ਰਹੇ ਹੋ, ਆਮ ਤੌਰ 'ਤੇ <body>.
ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਜਾਸੂਸੀ ਕਰਦੇ ਸਮੇਂ , ਇੱਕ ਸੈੱਟ ਅਤੇ ਲਾਗੂ <body>ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।heightoverflow-y: scroll;
ਐਂਕਰ ( <a>) ਦੀ ਲੋੜ ਹੈ ਅਤੇ ਉਸ ਨਾਲ ਇੱਕ ਤੱਤ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ id।

ਜਦੋਂ ਸਫਲਤਾਪੂਰਵਕ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਡਾ nav ਜਾਂ ਸੂਚੀ ਸਮੂਹ ਉਸ ਅਨੁਸਾਰ ਅੱਪਡੇਟ ਹੋ ਜਾਵੇਗਾ, .activeਕਲਾਸ ਨੂੰ ਉਹਨਾਂ ਦੇ ਸਬੰਧਿਤ ਟੀਚਿਆਂ ਦੇ ਅਧਾਰ 'ਤੇ ਇੱਕ ਆਈਟਮ ਤੋਂ ਅਗਲੀ ਵਿੱਚ ਭੇਜਦਾ ਹੈ।

ਨਵਬਾਰ ਦੇ ਹੇਠਾਂ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ। ਡ੍ਰੌਪਡਾਉਨ ਆਈਟਮਾਂ ਨੂੰ ਵੀ ਉਜਾਗਰ ਕੀਤਾ ਜਾਵੇਗਾ।

@ਚਰਬੀ

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਆਰਕੀਟੈਕਚਰ ਮਿਲਿਆ ਹੈ। ਪਾਸਪੋਰਟ ਸਟੈਂਪ, ਉਹ ਬ੍ਰਹਿਮੰਡੀ ਹੈ। ਵਧੀਆ, ਤਾਜ਼ਾ, ਕਰੜੇ, ਸਾਨੂੰ ਤਾਲੇ 'ਤੇ ਮਿਲ ਗਿਆ. ਕਦੇ ਇਹ ਯੋਜਨਾ ਨਹੀਂ ਬਣਾਈ ਸੀ ਕਿ ਇੱਕ ਦਿਨ ਮੈਂ ਤੁਹਾਨੂੰ ਗੁਆ ਦੇਵਾਂਗਾ. ਉਹ ਤੁਹਾਡੇ ਦਿਲ ਨੂੰ ਖਾ ਜਾਂਦੀ ਹੈ। ਤੁਹਾਡਾ ਚੁੰਮਣ ਬ੍ਰਹਿਮੰਡੀ ਹੈ, ਹਰ ਚਾਲ ਜਾਦੂ ਹੈ. ਮੇਰਾ ਮਤਲਬ ਉਹ ਹੈ, ਮੇਰਾ ਮਤਲਬ ਹੈ ਜਿਵੇਂ ਉਹ ਇੱਕ ਹੈ। ਸ਼ੁਭਕਾਮਨਾਵਾਂ ਪਿਆਰਿਆਂ ਨੂੰ ਆਓ ਇੱਕ ਯਾਤਰਾ ਕਰੀਏ। ਬਸ 4 ਜੁਲਾਈ ਵਰਗੀ ਰਾਤ ਦੇ ਮਾਲਕ! ਪਰ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਬਜਾਏ ਬਰਬਾਦ ਪ੍ਰਾਪਤ ਆਏਗਾ.

@mdo

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਕਿਉਂਕਿ ਉਹ ਮਿਊਜ਼ਿਕ ਅਤੇ ਕਲਾਕਾਰ ਹੈ। (ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਕਰਦੇ ਹਾਂ) ਇਸ ਲਈ ਤੁਸੀਂ ਜਾਦੂ ਨਾਲ ਖੇਡਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਸ ਲਈ ਮੈਨੂੰ ਇਹ ਸਭ ਦੇਣ ਤੋਂ ਪਹਿਲਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਓ. ਮੈਂ ਚੱਲ ਰਿਹਾ ਹਾਂ, ਮੈਂ ਹਵਾ 'ਤੇ ਚੱਲ ਰਿਹਾ ਹਾਂ (ਅੱਜ ਰਾਤ) ਗੱਲ ਛੱਡੋ, ਇਹ ਸਭ ਸੁਣਿਆ, ਸੈਰ ਕਰਨ ਦਾ ਸਮਾਂ.

ਇੱਕ

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

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਜੇ ਤੁਸੀਂ ਨੱਚਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਜੇ ਤੁਸੀਂ ਇਹ ਸਭ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਮੈਂ ਉਹ ਕੁੜੀ ਹਾਂ ਜਿਸਨੂੰ ਤੁਹਾਨੂੰ ਬੁਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ। ਮੈਂ ਤੂਫ਼ਾਨ ਵਿੱਚੋਂ ਲੰਘਾਂਗਾ। ਇਸ ਲਈ ਮੈਨੂੰ ਤੁਹਾਡੇ ਜਨਮਦਿਨ ਦੇ ਸੂਟ ਵਿੱਚ ਲਿਆਉਣ ਦਿਓ। ਉਹ, ਜਿਹੜਾ ਭੱਜ ਗਿਆ. ਪਿਛਲੇ ਸ਼ੁੱਕਰਵਾਰ ਰਾਤ, ਹਾਂ ਮੈਨੂੰ ਲੱਗਦਾ ਹੈ ਕਿ ਅਸੀਂ ਕਾਨੂੰਨ ਤੋੜਿਆ ਹੈ, ਹਮੇਸ਼ਾ ਕਹਿੰਦੇ ਹਾਂ ਕਿ ਅਸੀਂ ਰੁਕਣ ਜਾ ਰਹੇ ਹਾਂ। ਕਿਉਂਕਿ ਉਹ ਥੋੜਾ ਜਿਹਾ ਯੋਕੋ ਹੈ, ਅਤੇ ਉਹ ਥੋੜਾ ਜਿਹਾ 'ਓਹ ਨਹੀਂ' ਹੈ। ਮੈਨੂੰ ਜਬਾੜੇ ਦਾ ਡ੍ਰੌਪਪਿਨ, ਅੱਖਾਂ ਦੀ ਪੋਪਪਿਨ, ਸਿਰ ਘੁੰਮਣਾ, ਸਰੀਰ ਨੂੰ ਝਟਕਾ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ। ਹਾਂ, ਅਸੀਂ ਆਪਣੇ ਕ੍ਰੈਡਿਟ ਕਾਰਡਾਂ ਨੂੰ ਵੱਧ ਤੋਂ ਵੱਧ ਕੀਤਾ ਅਤੇ ਬਾਰ ਤੋਂ ਬਾਹਰ ਕੱਢ ਦਿੱਤਾ।

ਅਤੇ ਕੁਝ ਹੋਰ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ, ਚੰਗੇ ਮਾਪ ਲਈ.

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

ਨੇਸਟਡ nav ਨਾਲ ਉਦਾਹਰਨ

Scrollspy ਵੀ ਨੇਸਟਡ .navs ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ. ਜੇਕਰ ਇੱਕ ਆਲ੍ਹਣਾ .navਹੈ .active, ਤਾਂ ਇਸਦੇ ਮਾਪੇ ਵੀ ਹੋਣਗੇ .active। ਨਵਬਾਰ ਦੇ ਅਗਲੇ ਖੇਤਰ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰੋ ਅਤੇ ਸਰਗਰਮ ਕਲਾਸ ਤਬਦੀਲੀ ਦੇਖੋ।

ਆਈਟਮ 1

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 1 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਤੁਹਾਨੂੰ ਮੀਲ ਉੱਚਾ, ਇੰਨਾ ਉੱਚਾ ਲੈ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ ਉਸਨੂੰ ਇੱਕ ਅੰਤਰਰਾਸ਼ਟਰੀ ਮੁਸਕਰਾਹਟ ਮਿਲੀ ਹੈ। ਮੇਰੇ ਬਿਸਤਰੇ ਵਿੱਚ ਇੱਕ ਅਜਨਬੀ ਹੈ, ਮੇਰੇ ਸਿਰ ਵਿੱਚ ਇੱਕ ਧੜਕਣ ਹੈ. ਓਹ ਨਹੀਂ. ਇੱਕ ਹੋਰ ਜ਼ਿੰਦਗੀ ਵਿੱਚ ਮੈਂ ਤੁਹਾਨੂੰ ਠਹਿਰਾਵਾਂਗਾ. 'ਕਿਉਂਕਿ ਮੈਂ, ਮੈਂ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਦੇ ਸਮਰੱਥ ਹਾਂ. ਮੇਰੀ ਤਾਜ ਦੀ ਲੜਾਈ ਲਈ ਅਨੁਕੂਲ. ਆਪਣੇ ਮਾਪਿਆਂ ਦੀ ਸ਼ਰਾਬ ਚੋਰੀ ਕਰਕੇ ਛੱਤ 'ਤੇ ਚੜ੍ਹ ਜਾਂਦਾ ਸੀ। ਟੋਨ, ਟੈਨ ਫਿੱਟ ਅਤੇ ਤਿਆਰ, ਇਸ ਨੂੰ ਮੋੜੋ ਕਿਉਂਕਿ ਇਹ ਭਾਰੀ ਹੋ ਰਿਹਾ ਹੈ। ਉਸਦਾ ਪਿਆਰ ਨਸ਼ੇ ਵਾਂਗ ਹੈ। ਮੇਰਾ ਅੰਦਾਜ਼ਾ ਹੈ ਕਿ ਮੈਂ ਭੁੱਲ ਗਿਆ ਸੀ ਕਿ ਮੇਰੇ ਕੋਲ ਇੱਕ ਵਿਕਲਪ ਸੀ।

ਆਈਟਮ 1-1

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 1-1 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਤੁਹਾਨੂੰ ਸਭ ਤੋਂ ਵਧੀਆ ਆਰਕੀਟੈਕਚਰ ਮਿਲਿਆ ਹੈ। ਪਾਸਪੋਰਟ ਸਟੈਂਪ, ਉਹ ਬ੍ਰਹਿਮੰਡੀ ਹੈ। ਵਧੀਆ, ਤਾਜ਼ਾ, ਕਰੜੇ, ਸਾਨੂੰ ਤਾਲੇ 'ਤੇ ਮਿਲ ਗਿਆ. ਕਦੇ ਇਹ ਯੋਜਨਾ ਨਹੀਂ ਬਣਾਈ ਸੀ ਕਿ ਇੱਕ ਦਿਨ ਮੈਂ ਤੁਹਾਨੂੰ ਗੁਆ ਦੇਵਾਂਗਾ. ਉਹ ਤੁਹਾਡੇ ਦਿਲ ਨੂੰ ਖਾ ਜਾਂਦੀ ਹੈ। ਤੁਹਾਡਾ ਚੁੰਮਣ ਬ੍ਰਹਿਮੰਡੀ ਹੈ, ਹਰ ਚਾਲ ਜਾਦੂ ਹੈ. ਮੇਰਾ ਮਤਲਬ ਉਹ ਹੈ, ਮੇਰਾ ਮਤਲਬ ਹੈ ਜਿਵੇਂ ਉਹ ਇੱਕ ਹੈ। ਸ਼ੁਭਕਾਮਨਾਵਾਂ ਪਿਆਰਿਆਂ ਨੂੰ ਆਓ ਇੱਕ ਯਾਤਰਾ ਕਰੀਏ। ਬਸ 4 ਜੁਲਾਈ ਵਰਗੀ ਰਾਤ ਦੇ ਮਾਲਕ! ਪਰ ਤੁਹਾਨੂੰ ਇਸ ਦੀ ਬਜਾਏ ਬਰਬਾਦ ਪ੍ਰਾਪਤ ਆਏਗਾ.

ਆਈਟਮ 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

ਸਕ੍ਰੌਲਸਪੀ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 3-2 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਤੁਸੀਂ ਅਸਲੀ ਹੋ, ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਸਾਰੀ ਰਾਤ ਉਹ ਵਜਾਉਂਦੇ ਰਹੇ, ਤੁਹਾਡਾ ਗੀਤ। ਕੈਲੀਫੋਰਨੀਆ ਦੀਆਂ ਕੁੜੀਆਂ ਅਸੀਂ ਅਸਵੀਕਾਰਨਯੋਗ ਹਾਂ। ਪਿੰਜਰੇ ਤੋਂ ਬਿਨਾਂ ਪੰਛੀ ਵਾਂਗ। ਹੁਣ ਕੋਈ ਡਰ ਨਹੀਂ, ਛੱਡੋ ਅਤੇ ਆਜ਼ਾਦ ਹੋਵੋ, ਮੈਂ ਤੁਹਾਨੂੰ ਬਿਨਾਂ ਸ਼ਰਤ ਪਿਆਰ ਕਰਾਂਗਾ। ਮੈਂ ਕੰਧ 'ਤੇ ਲਿਖਤ ਦੇਖ ਸਕਦਾ ਹਾਂ। ਤੁਸੀਂ ਦੁਨੀਆ ਦੀ ਯਾਤਰਾ ਕਰ ਸਕਦੇ ਹੋ ਪਰ ਸੋਨੇ ਦੇ ਤੱਟ ਦੇ ਨੇੜੇ ਕੁਝ ਵੀ ਨਹੀਂ ਆਉਂਦਾ.

<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 ਆਈਟਮ 2 ਆਈਟਮ 3 ਆਈਟਮ 4

ਆਈਟਮ 1

ਸਕ੍ਰੌਲਸਪੀ ਸੂਚੀ-ਸਮੂਹ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 1 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਮਾਫੀ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਹੁਣ ਕੋਈ ਡਰ ਨਹੀਂ, ਛੱਡੋ ਅਤੇ ਆਜ਼ਾਦ ਹੋਵੋ, ਮੈਂ ਤੁਹਾਨੂੰ ਬਿਨਾਂ ਸ਼ਰਤ ਪਿਆਰ ਕਰਾਂਗਾ। ਪਿੱਛਲੀ ਸ਼ੁੱਕਰਵਾਰ ਰਾਤ. ਸ਼ਰਮੀਲੇ ਕਿਸਮ ਦਾ ਮੁੰਡਾ ਨਾ ਬਣੋ, ਮੈਂ ਸੱਟਾ ਲਗਾਵਾਂਗਾ ਕਿ ਇਹ ਸੁੰਦਰ ਹੈ। ਹਾਈ ਸਕੂਲ ਤੋਂ ਬਾਅਦ ਗਰਮੀਆਂ ਜਦੋਂ ਅਸੀਂ ਪਹਿਲੀ ਵਾਰ ਮਿਲੇ ਸੀ। ਕਿਉਂਕਿ ਉਹ ਮਿਊਜ਼ਿਕ ਅਤੇ ਕਲਾਕਾਰ ਹੈ। ਕੀ? ਉਡੀਕ ਕਰੋ। ਸੋਚਿਆ ਕਿ ਮੈਂ ਅਪਵਾਦ ਸੀ.

ਆਈਟਮ 2

ਸਕ੍ਰੌਲਸਪੀ ਸੂਚੀ-ਸਮੂਹ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 2 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਹਾਂ, ਉਹ ਆਪਣੀ ਹੀ ਬੀਟ 'ਤੇ ਨੱਚਦੀ ਹੈ। ਓਹ ਨਹੀਂ. ਤੁਸੀਂ ਸਭ ਤੋਂ ਮਹਾਨ ਹੋ ਸਕਦੇ ਸੀ। 'ਕਾਰਨ, ਬੇਬੀ, ਤੁਸੀਂ ਇੱਕ ਆਤਿਸ਼ਬਾਜ਼ੀ ਹੋ। ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਸਾਰੇ ਦਰਵਾਜ਼ੇ ਬੰਦ ਹੋਣ ਦਾ ਇੱਕ ਕਾਰਨ. ਆਪਣੇ ਦਿਲ ਨੂੰ ਖੋਲ੍ਹੋ ਅਤੇ ਇਸਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਿਓ। ਇਸ ਲਈ ਬਹੁਤ ਵਧੀਆ, ਹਾਂ, ਉਹ ਇੱਕ ਕਲਾਸਿਕ ਹੈ।

ਆਈਟਮ 3

ਸਕ੍ਰੌਲਸਪੀ ਸੂਚੀ-ਸਮੂਹ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 3 ਨਾਲ ਸਬੰਧਤ ਹੈ। ਅਸੀਂ ਉੱਚੇ ਅਤੇ ਉੱਚੇ ਜਾਂਦੇ ਹਾਂ। ਇੱਕ ਦੂਜੇ ਤੋਂ ਬਿਨਾਂ ਕਦੇ ਨਹੀਂ, ਅਸੀਂ ਇੱਕ ਸਮਝੌਤਾ ਕੀਤਾ. ਮੈਂ ਹਵਾ 'ਤੇ ਚੱਲ ਰਿਹਾ ਹਾਂ। ਕਿਸੇ ਨੇ ਕਿਹਾ ਕਿ ਤੁਸੀਂ ਆਪਣਾ ਟੈਟੂ ਹਟਾ ਦਿੱਤਾ ਹੈ। ਹੁਣ ਮੈਂ ਤਿਤਲੀ ਵਾਂਗ ਤੈਰ ਰਿਹਾ ਹਾਂ। ਟੋਨ, ਟੈਨ ਫਿੱਟ ਅਤੇ ਤਿਆਰ, ਇਸ ਨੂੰ ਮੋੜੋ ਕਿਉਂਕਿ ਇਹ ਭਾਰੀ ਹੋ ਰਿਹਾ ਹੈ। ਕਿਉਂਕਿ ਇੱਕ ਵਾਰ ਤੁਸੀਂ ਮੇਰੇ ਹੋ, ਇੱਕ ਵਾਰ ਤੁਸੀਂ ਮੇਰੇ ਹੋ. ਤੁਹਾਨੂੰ ਬੱਸ ਰੋਸ਼ਨੀ ਨੂੰ ਜਗਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਚਮਕਣ ਦਿਓ! ਇਸ ਲਈ ਅਸੀਂ ਬੁਲੇਵਾਰਡ ਨੂੰ ਮਾਰਿਆ. ਕੀ ਤੁਸੀਂ ਕਦੇ ਮਹਿਸੂਸ ਕਰਦੇ ਹੋ, ਇੰਨਾ ਕਾਗਜ਼ ਪਤਲਾ ਮਹਿਸੂਸ ਕਰੋ. ਮੈਂ ਇਹ ਸਭ ਦੇਖਦਾ ਹਾਂ, ਮੈਂ ਹੁਣ ਦੇਖਦਾ ਹਾਂ।

ਆਈਟਮ 4

ਸਕ੍ਰੌਲਸਪੀ ਸੂਚੀ-ਸਮੂਹ ਉਦਾਹਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਸਮੱਗਰੀ। ਇਹ ਆਈਟਮ 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>

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

ਆਪਣੀ ਟੌਪਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਸਕ੍ਰੌਲਸਪੀ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਾਮਲ 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' })

ਹੱਲ ਕਰਨ ਯੋਗ ID ਟੀਚੇ ਲੋੜੀਂਦੇ ਹਨ

ਨਵਬਾਰ ਲਿੰਕਾਂ ਵਿੱਚ ਹੱਲ ਕਰਨ ਯੋਗ id ਟੀਚੇ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਇੱਕ <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...
})

ਸਕ੍ਰੌਲਸਪੀ

ਕਿਦਾ ਚਲਦਾ

ਨਵਬਾਰ ਵਿੱਚ ਉਦਾਹਰਨ

@ਚਰਬੀ

@mdo

ਇੱਕ

two

three

ਨੇਸਟਡ nav ਨਾਲ ਉਦਾਹਰਨ

ਆਈਟਮ 1

ਆਈਟਮ 1-1

ਆਈਟਮ 1-2

Item 2

Item 3

Item 3-1

Item 3-2

ਸੂਚੀ-ਸਮੂਹ ਦੇ ਨਾਲ ਉਦਾਹਰਨ

ਆਈਟਮ 1

ਆਈਟਮ 2

ਆਈਟਮ 3

ਆਈਟਮ 4

ਵਰਤੋਂ

ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ

JavaScript ਰਾਹੀਂ

ਹੱਲ ਕਰਨ ਯੋਗ ID ਟੀਚੇ ਲੋੜੀਂਦੇ ਹਨ

ਗੈਰ- :visibleਨਿਸ਼ਾਨਾ ਤੱਤਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਗਿਆ

ਢੰਗ

.scrollspy('refresh')

.scrollspy('dispose')

ਵਿਕਲਪ

ਸਮਾਗਮ

ਗੈਰ- `:visible`ਨਿਸ਼ਾਨਾ ਤੱਤਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਗਿਆ

`.scrollspy('refresh')`

`.scrollspy('dispose')`