in English

Scrollspy

Bootstrap يولباشچىسى ياكى تىزىملىك ​​گۇرۇپپىسىنىڭ زاپچاسلىرىنى سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاپ ، كۆرۈنۈشتە قايسى ئۇلىنىشنىڭ ئاكتىپ ئىكەنلىكىنى كۆرسىتىپ بېرىدۇ.

قانداق ئىشلەيدۇ

Scrollspy نىڭ نورمال ئىشلەش ئۈچۈن بىر قانچە تەلىپى بار:

  • ئەگەر JavaScript نى مەنبەدىن قۇرغان بولسىڭىز ، ئۇ تەلەپ قىلىدۇutil.js .
  • ئۇ چوقۇم Bootstrap nav زاپچاسلىرى ياكى تىزىملىك ​​گۇرۇپپىسىدا ئىشلىتىلىشى كېرەك.
  • Scrollspy position: relative;سىز جاسۇسلۇق قىلىۋاتقان ئېلېمېنتقا ئېھتىياجلىق <body>.
  • ئۇنىڭدىن باشقا ئېلېمېنتلارغا جاسۇسلۇق قىلغاندا <body>، چوقۇم بىر heightيۈرۈش ۋە overflow-y: scroll;قوللىنىشقا كاپالەتلىك قىلىڭ.
  • لەڭگەر ( <a>) تەلەپ قىلىنىدۇ ۋە چوقۇم بۇنىڭ بىلەن بىر ئېلېمېنتنى كۆرسىتىشى idكېرەك.

مۇۋەپپەقىيەتلىك يولغا قويۇلغاندا ، nav ياكى تىزىملىك ​​گۇرۇپپىڭىز ماس ھالدا يېڭىلىنىدۇ ، .activeمۇناسىۋەتلىك نىشانلارغا ئاساسەن سىنىپنى بىر تۈردىن يەنە بىر تۈرگە يۆتكەيدۇ.

Navbar دىكى مىسال

يولباشچىنىڭ ئاستىدىكى رايوننى سىيرىپ ئاكتىپ سىنىپ ئۆزگىرىشىنى كۆرۈڭ. چۈشۈش تۈرلىرىمۇ گەۋدىلىنىدۇ.

@fat

Scrollspy مىسالى ئۈچۈن ئورۇن ئىگىسى. ئەڭ ئېسىل بىناكارلىققا ئېرىشتىڭىز. پاسپورت تامغىسى ، ئۇ ئالەمشۇمۇل. ئېسىل ، يېڭى ، كەسكىن ، ئۇنى قۇلۇپقا ئالدۇق. بىر كۈنى سىزنى يوقىتىمەن دەپ ئويلاپ باقمىغان. ئۇ سىزنىڭ يۈرىكىڭىزنى يەيدۇ. سىزنىڭ سۆيۈشىڭىز ئالەم ، ھەر بىر ھەرىكەت سېھىرلىك. دېمەكچىمەنكى ، ئۇ مېنىڭ دېمەكچى بولغىنىم. يېقىنلىرىڭىزغا سالام يوللايلى. 7-ئاينىڭ 4-كۈنىگە ئوخشاش كېچىگە ئىگىدارچىلىق قىلىڭ! ئەمما ئىسراپ بولۇپ كېتىسىز.

@mdo

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 مىسالى ئۈچۈن ئورۇن ئىگىسى. ئەگەر ئۇسسۇل ئوينىماقچى بولسىڭىز ، ھەممىنى ئويلىسىڭىز ، مېنىڭ تېلېفون قىلىشىڭىز كېرەك قىز ئىكەنلىكىمنى بىلىسىز. بوران-چاپقۇندىن مېڭىڭ. شۇڭا سىزنى تۇغۇلغان كۈنىڭىزگە ئالاي. قېچىپ كەتكەن. ئالدىنقى جۈمە كۈنى كەچتە ، ھەئە مېنىڭچە بىز قانۇنغا خىلاپلىق قىلدۇق ، ھەمىشە توختىتىمىز دەيمىز. «ئۇ بىر ئاز يوكونىڭ سەۋەبى ، ئۇ ئازراق« ھە ياق ». مەن ئېڭەك تامچىسى ، كۆز پوپپىن ، باش ئايلانمىسى ، بەدەن سوقۇشى قاتارلىقلارنى ئۈمىد قىلىمەن. ھەئە ، بىز ئىناۋەتلىك كارتىمىزنى چوڭايتىپ ، قاۋاقخانىدىن قوغلاندۇق.

يەنە بىر قىسىم ئورۇن ئىگىلىرىنىڭ مەزمۇنى ياخشى.

<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-تۈر

Scrollspy مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 1-تۈر بىلەن مۇناسىۋەتلىك. ئۇ سىزنى نەچچە ئىنگلىز مىلى ئېگىزلىكتە ئېگىز قىلىدۇ ، چۈنكى ئۇ خەلقئارالىق بىر تەبەسسۇمغا ئېرىشتى. كارىۋاتتا ناتونۇش ئادەم بار ، بېشىمدا سوقۇلۇش بار. ھە ، ياق. باشقا بىر ھاياتتا مەن سىزنى ساقلاپ قالىمەن. «سەۋەبى مەن ، مەن ھەر قانداق نەرسىگە قادىر. مېنىڭ تاج كىيگەن جېڭىمگە ماس كېلىدۇ. ئاتا-ئانىڭىزنىڭ ھاراقلىرىنى ئوغرىلاپ ئۆگزىگە چىقىشقا ئىشلىتىلىدۇ. ئاھاڭى ، ماسلاشتۇرۇلغان ۋە تەييار ، ئۇنى ئايلاندۇرۇپ ئۇنىڭ گېتىننىڭ ئېغىرلىقىنى كەلتۈرۈپ چىقىرىدۇ. ئۇنىڭ مۇھەببىتى زەھەرلىك چېكىملىككە ئوخشايدۇ. مېنىڭ تاللىشىم بارلىقىنى ئۇنتۇپ قالغانلىقىمنى پەرەز قىلىمەن.

Item 1-1

Scrollspy مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 1-1 تۈر بىلەن مۇناسىۋەتلىك. ئەڭ ئېسىل بىناكارلىققا ئېرىشتىڭىز. پاسپورت تامغىسى ، ئۇ ئالەمشۇمۇل. ئېسىل ، يېڭى ، كەسكىن ، ئۇنى قۇلۇپقا ئالدۇق. بىر كۈنى سىزنى يوقىتىمەن دەپ ئويلاپ باقمىغان. ئۇ سىزنىڭ يۈرىكىڭىزنى يەيدۇ. سىزنىڭ سۆيۈشىڭىز ئالەم ، ھەر بىر ھەرىكەت سېھىرلىك. دېمەكچىمەنكى ، ئۇ مېنىڭ دېمەكچى بولغىنىم. يېقىنلىرىڭىزغا سالام يوللايلى. 7-ئاينىڭ 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

Scrollspy مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 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-تۈر

Scrollspy تىزىملىك-گۇرۇپپا مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 1-تۈرگە مۇناسىۋەتلىك. كەچۈرۈم سوراشنىڭ ھاجىتى يوق. ھازىر قورقۇنچ يوق ، قويۇپ بېرىڭ ، ئەركىن بولۇڭ ، مەن سىزنى شەرتسىز ياخشى كۆرىمەن. ئالدىنقى جۈمە كۈنى كەچتە. تارتىنچاق يىگىت بولماڭ مەن چىرايلىق دەپ دو تىكىمەن. تولۇق ئوتتۇرا مەكتەپتىن كېيىن ياز. ئۇنىڭ سەۋەبى ئۇ سەنئەتكار ۋە سەنئەتكار. نېمە؟ ساقلاپ تۇرۇڭ. مەن بۇنىڭدىن مۇستەسنا دەپ ئويلىدىم.

2-تۈر

Scrollspy تىزىملىك-گۇرۇپپا مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 2-تۈرگە مۇناسىۋەتلىك ، ھەئە ، ئۇ ئۆزىنىڭ سوقۇشىغا ئۇسۇل ئوينايدۇ. ھە ، ياق. سىز ئەڭ ئۇلۇغ بولالايسىز. 'سەۋەبى ، بالام ، سەن پوجاڭزا. بەلكىم بارلىق ئىشىكلەرنىڭ تاقىلىپ قېلىشىدىكى سەۋەب بولۇشى مۇمكىن. يۈرىكىڭىزنى ئېچىڭ ، ئۇنى باشلاڭ. شۇڭا très chic ، شۇنداق ، ئۇ بىر كلاسسىك.

3-تۈر

Scrollspy تىزىملىك-گۇرۇپپا مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 3-تۈرگە مۇناسىۋەتلىك. ھەرگىزمۇ بىرى بولمىسا ، بىز كېلىشىم تۈزدۇق. مەن ھاۋادا كېتىۋاتىمەن. بەزىلەر چەكمىڭىزنى ئېلىۋەتتىڭىز دېدى. ھازىر مەن كېپىنەكتەك لەيلەۋاتىمەن. ئاھاڭى ، ماسلاشتۇرۇلغان ۋە تەييار ، ئۇنى ئايلاندۇرۇپ ئۇنىڭ گېتىننىڭ ئېغىرلىقىنى كەلتۈرۈپ چىقىرىدۇ. بىر قېتىم مېنىڭ ، بىر قېتىم مېنىڭ. سىز پەقەت نۇرنى ياندۇرۇپ ، ئۇنى يورۇتۇشىڭىز كېرەك! شۇنىڭ بىلەن بىز بۇلاقنى ئۇردۇق. ئەزەلدىن قەغەز نېپىزدەك ھېس قىلامسىز؟ مەن ھەممىنى كۆرىمەن ، ھازىر كۆرىمەن.

4-تۈر

Scrollspy تىزىملىك-گۇرۇپپا مىسالى ئۈچۈن ئورۇن ئىگىسى. بۇ 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>). ئاندىن ھەر قانداق Bootstrap زاپچاسلىرىنىڭ data-targetئانا ئېلېمېنتىنىڭ كىملىكى ياكى سىنىپى بىلەن خاسلىقنى قوشۇڭ..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' })

ھەل قىلىشقا بولىدىغان كىملىك ​​نىشانلىرى تەلەپ قىلىنىدۇ

Navbar ئۇلىنىشىدا ھەل قىلغىلى بولىدىغان id نىشانلىرى بولۇشى كېرەك. مەسىلەن ، <a href="#home">home</a>چوقۇم DOM غا ئوخشاش نەرسىگە ماس كېلىشى كېرەك <div id="home"></div>.

نىشانسىز :visibleئېلېمېنتلار نەزەردىن ساقىت قىلىندى

:visibleJQuery غا ماس كەلمەيدىغان نىشان ئېلېمېنتلىرى نەزەردىن ساقىت قىلىنىدۇ ۋە ئۇلارنىڭ ماس كېلىدىغان تۈرلىرى ھەرگىز گەۋدىلەنمەيدۇ.

Methods

.scrollspy('refresh')

DOM دىكى ئېلېمېنتلارنى قوشۇش ياكى چىقىرىۋېتىش بىلەن بىللە scrollspy نى ئىشلەتكەندە ، يېڭىلاش ئۇسۇلىنى مۇنداق چاقىرىشىڭىز كېرەك:

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

.scrollspy('dispose')

بىر ئېلېمېنتنىڭ سىيرىلمىسىنى يوقىتىدۇ.

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-offset="".

ئىسمى تىپ سۈكۈتتىكى چۈشەندۈرۈش
offset سان 10 دومىلىما ئورۇننى ھېسابلىغاندا يۇقىرىدىن ئۆچۈرۈلىدىغان پىكسېل.
method string auto جاسۇسلۇق ئېلېمېنتىنىڭ قايسى بۆلەكتە ئىكەنلىكىنى ئىزدەيدۇ. autoسىيرىلما كوئوردېناتقا ئېرىشىشنىڭ ئەڭ ياخشى ئۇسۇلىنى تاللايدۇ. offsetسىيرىلما كوئوردېناتقا ئېرىشىش ئۈچۈن jQuery offset ئۇسۇلىنى قوللىنىدۇ. positionسىيرىلما كوئوردېناتقا ئېرىشىش ئۈچۈن jQuery ئورۇن ئۇسۇلىنى قوللىنىدۇ.
نىشان string | jQuery ئوبيېكتى | DOM ئېلمىنتى Scrollspy قىستۇرمىسىنى ئىشلىتىدىغان ئېلېمېنتنى بەلگىلەيدۇ.

Events

پائالىيەت تىپى چۈشەندۈرۈش
activate.bs.scrollspy بۇ ھادىسە سىيرىلما ئېلېمېنت تەرىپىدىن قوزغىتىلىدۇ. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})