in English

ເລື່ອນ

ອັບເດດການນຳທາງ Bootstrap ໂດຍອັດຕະໂນມັດ ຫຼືລາຍຊື່ອົງປະກອບກຸ່ມໂດຍອີງໃສ່ຕຳແໜ່ງເລື່ອນເພື່ອລະບຸວ່າລິ້ງໃດກຳລັງເຄື່ອນໄຫວຢູ່ໃນຊ່ອງເບິ່ງ.

ມັນເຮັດວຽກແນວໃດ

Scrollspy ມີຄວາມຕ້ອງການຈໍານວນຫນ້ອຍເພື່ອເຮັດວຽກຢ່າງຖືກຕ້ອງ:

  • ຖ້າທ່ານກໍາລັງສ້າງ JavaScript ຂອງພວກເຮົາຈາກແຫຼ່ງ, ມັນ ຕ້ອງການutil.js .
  • ມັນຕ້ອງຖືກໃຊ້ໃນ ອົງປະກອບ Bootstrap nav ຫຼື ກຸ່ມລາຍຊື່ .
  • Scrollspy ຮຽກຮ້ອງໃຫ້ມີ position: relative;ອົງປະກອບທີ່ທ່ານກໍາລັງ spying ສຸດ, ປົກກະຕິແລ້ວ <body>.
  • ໃນ​ເວ​ລາ​ທີ່ spying ກ່ຽວ​ກັບ​ອົງ​ປະ​ກອບ​ອື່ນໆ​ນອກ​ເຫນືອ​ໄປ​ຈາກ <body>, ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ມີ height​ກໍາ​ນົດ​ໄວ້​ແລະ overflow-y: scroll;​ນໍາ​ໃຊ້​.
  • Anchors ( <a>) ແມ່ນຈໍາເປັນແລະຕ້ອງຊີ້ໄປຫາອົງປະກອບທີ່ມີນັ້ນ id.

ເມື່ອປະຕິບັດຢ່າງສໍາເລັດຜົນ, ກຸ່ມ nav ຫຼືລາຍຊື່ຂອງທ່ານຈະປັບປຸງຕາມຄວາມເຫມາະສົມ, ການເຄື່ອນຍ້າຍ .activeຊັ້ນຮຽນຈາກຫນຶ່ງລາຍການໄປຫາຕໍ່ໄປໂດຍອີງໃສ່ເປົ້າຫມາຍທີ່ກ່ຽວຂ້ອງຂອງພວກເຂົາ.

ຕົວຢ່າງໃນ navbar

ເລື່ອນພື້ນທີ່ທາງລຸ່ມແຖບ navbar ແລະເບິ່ງການປ່ຽນແປງຊັ້ນຮຽນທີ່ມີການເຄື່ອນໄຫວ. ລາຍການແບບເລື່ອນລົງຈະຖືກເນັ້ນໃສ່ເຊັ່ນກັນ.

@ໄຂມັນ

ເນື້ອໃນຕົວຍຶດສໍາລັບຕົວຢ່າງ scrollspy. ທ່ານໄດ້ຮັບສະຖາປັດຕະຍະກໍາທີ່ດີທີ່ສຸດ. ສະແຕມຫນັງສືຜ່ານແດນ, ນາງເປັນ cosmopolitan. ດີ, ສົດ, ຮຸນແຮງ, ພວກເຮົາໄດ້ຮັບມັນຢູ່ໃນລັອກ. ບໍ່ເຄີຍວາງແຜນວ່າມື້ຫນຶ່ງຂ້ອຍຈະສູນເສຍເຈົ້າ. ນາງກິນຫົວໃຈຂອງເຈົ້າອອກ. kiss ຂອງທ່ານແມ່ນ cosmic, ທຸກການເຄື່ອນໄຫວແມ່ນ magic. ຂ້ອຍ ໝາຍ ຄວາມວ່າຄົນນັ້ນ, ຂ້ອຍ ໝາຍ ຄວາມວ່າຄືກັບນາງ. ອວຍພອນໃຫ້ຄົນທີ່ທ່ານຮັກ ເດີນທາງຕໍ່ໄປ. ພຽງແຕ່ເປັນເຈົ້າຂອງຄືນຄືວັນທີ 4 ກໍລະກົດ! ແຕ່ເຈົ້າຢາກເສຍເງິນຫຼາຍ.

@mdo

ເນື້ອໃນຕົວຍຶດສໍາລັບຕົວຢ່າງ scrollspy. 'ເພາະນາງເປັນ muse ແລະສິລະປິນ. (ນີ້​ແມ່ນ​ວິ​ທີ​ທີ່​ພວກ​ເຮົາ​ເຮັດ​) ດັ່ງ​ນັ້ນ​ທ່ານ​ຕ້ອງ​ການ​ຫຼິ້ນ​ກັບ magic​. ສະນັ້ນພຽງແຕ່ໃຫ້ແນ່ໃຈວ່າກ່ອນທີ່ທ່ານຈະໃຫ້ມັນທັງຫມົດກັບຂ້າພະເຈົ້າ. ຂ້ອຍກໍາລັງຍ່າງ, ຂ້ອຍກໍາລັງຍ່າງຢູ່ເທິງອາກາດ (ຄືນນີ້). ຂ້າມການສົນທະນາ, ໄດ້ຍິນມັນທັງຫມົດ, ເວລາທີ່ຈະຍ່າງຍ່າງ.

ຫນຶ່ງ

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. ຖ້າເຈົ້າຢາກເຕັ້ນ, ຖ້າເຈົ້າຕ້ອງການທຸກຢ່າງ, ເຈົ້າຮູ້ວ່າຂ້ອຍແມ່ນຍິງທີ່ເຈົ້າຄວນໂທຫາ. ຍ່າງຜ່ານພາຍຸທີ່ຂ້ອຍຈະ. ສະນັ້ນໃຫ້ຂ້ອຍເອົາເຈົ້າໃສ່ຊຸດວັນເກີດຂອງເຈົ້າ. ຄົນ​ຫນຶ່ງ​ທີ່​ຈາກ​ໄປ. ໃນຄືນວັນສຸກທີ່ຜ່ານມາ, ແມ່ນແລ້ວ, ຂ້າພະເຈົ້າຄິດວ່າພວກເຮົາລະເມີດກົດຫມາຍ, ເວົ້າສະເຫມີວ່າພວກເຮົາຈະຢຸດເຊົາ. 'ເພາະວ່ານາງເປັນ Yoko ເລັກນ້ອຍ, ແລະນາງເປັນ 'Oh no' ເລັກນ້ອຍ. ຂ້ອຍຕ້ອງການຄາງກະໄຕ droppin', ຕາ poppin', ຫົວ turnin ', ຮ່າງກາຍຊ໊ອກ'. ແມ່ນແລ້ວ, ພວກເຮົາເພີ່ມບັດເຄຣດິດຂອງພວກເຮົາ ແລະຖືກໄລ່ອອກຈາກແຖບ.

ແລະບາງເນື້ອໃນສະຖານທີ່ເພີ່ມເຕີມ, ສໍາລັບມາດຕະການທີ່ດີ.

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

Scrollspy ຍັງເຮັດວຽກກັບ nested .navs. .navຖ້າ ເປັນ ຮັງ .active, ພໍ່ແມ່ຂອງມັນຈະເປັນຄື .activeກັນ. ເລື່ອນພື້ນທີ່ຖັດຈາກແຖບນໍາທາງ ແລະເບິ່ງການປ່ຽນແປງຫ້ອງຮຽນທີ່ເຄື່ອນໄຫວຢູ່.

ລາຍການທີ 1

ເນື້ອໃນຕົວຍຶດສໍາລັບຕົວຢ່າງ scrollspy. ອັນນີ້ກ່ຽວຂ້ອງກັບລາຍການທີ 1. ເອົາເຈົ້າເປັນໄມ່ສູງ, ສູງຫຼາຍ, ເພາະວ່າລາວມີຮອຍຍິ້ມສາກົນອັນໜຶ່ງ. ມີຄົນແປກຫນ້າຢູ່ໃນຕຽງຂອງຂ້ອຍ, ມີການເຕັ້ນຢູ່ໃນຫົວຂອງຂ້ອຍ. ໂອ​ບໍ່. ໃນຊີວິດອື່ນຂ້ອຍຈະເຮັດໃຫ້ເຈົ້າຢູ່. 'ເພາະວ່າຂ້ອຍ, ຂ້ອຍສາມາດເຮັດຫຍັງໄດ້. ເຫມາະສົມກັບການສູ້ຮົບມົງກຸດຂອງຂ້ອຍ. ເຄີຍລັກເຫຼົ້າຂອງພໍ່ແມ່ ແລ້ວປີນຂຶ້ນຫຼັງຄາ. ໂຕນ, tan ເຫມາະແລະກຽມພ້ອມ, ເຮັດໃຫ້ມັນຂຶ້ນເຮັດໃຫ້ມັນຫນັກຫນ່ວງ. ຄວາມຮັກຂອງນາງແມ່ນຄ້າຍຄືຢາ. ຂ້ອຍເດົາວ່າຂ້ອຍລືມຂ້ອຍມີທາງເລືອກ.

ລາຍການ 1-1

ເນື້ອໃນຕົວຍຶດສໍາລັບຕົວຢ່າງ scrollspy. ອັນນີ້ກ່ຽວຂ້ອງກັບລາຍການ 1-1. ທ່ານໄດ້ຮັບສະຖາປັດຕະຍະກໍາທີ່ດີທີ່ສຸດ. ສະແຕມຫນັງສືຜ່ານແດນ, ນາງເປັນ cosmopolitan. ດີ, ສົດ, ຮຸນແຮງ, ພວກເຮົາໄດ້ຮັບມັນຢູ່ໃນລັອກ. ບໍ່ເຄີຍວາງແຜນວ່າມື້ຫນຶ່ງຂ້ອຍຈະສູນເສຍເຈົ້າ. ນາງກິນຫົວໃຈຂອງເຈົ້າອອກ. kiss ຂອງທ່ານແມ່ນ cosmic, ທຸກການເຄື່ອນໄຫວແມ່ນ magic. ຂ້ອຍ ໝາຍ ຄວາມວ່າຄົນນັ້ນ, ຂ້ອຍ ໝາຍ ຄວາມວ່າຄືກັບນາງ. ອວຍພອນໃຫ້ຄົນທີ່ທ່ານຮັກ ເດີນທາງຕໍ່ໄປ. ພຽງແຕ່ເປັນເຈົ້າຂອງຄືນຄືວັນທີ 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. ບໍ່ຕ້ອງຂໍອະໄພ. ບໍ່ມີຄວາມຢ້ານກົວໃນປັດຈຸບັນ, ປ່ອຍໃຫ້ໄປແລະພຽງແຕ່ເປັນອິດສະລະ, ຂ້ອຍຈະຮັກເຈົ້າໂດຍບໍ່ມີເງື່ອນໄຂ. ໃນຄືນວັນສຸກທີ່ຜ່ານມາ. ຢ່າເປັນຜູ້ຊາຍທີ່ຂີ້ອາຍ ຂ້ອຍຈະແນ່ໃຈວ່າມັນງາມ. Summer ຫຼັງຈາກໂຮງຮຽນມັດທະຍົມຕອນທີ່ພວກເຮົາພົບຄັ້ງທໍາອິດ. 'ເພາະນາງເປັນ muse ແລະສິລະປິນ. ແມ່ນ​ຫຍັງ? ລໍຖ້າ. ຄິດວ່າຂ້ອຍເປັນຂໍ້ຍົກເວັ້ນ.

ລາຍການ 2

ເນື້ອຫາຕົວຍຶດສໍາລັບຕົວຢ່າງຂອງກຸ່ມລາຍຊື່ scrollspy. ອັນນີ້ກ່ຽວຂ້ອງກັບລາຍການທີ 2. ແມ່ນແລ້ວ, ນາງເຕັ້ນກັບຕີຂອງຕົນເອງ. ໂອ​ບໍ່. ເຈົ້າສາມາດເປັນທີ່ຍິ່ງໃຫຍ່ທີ່ສຸດ. 'ເພາະວ່າ, ລູກ, ເຈົ້າເປັນດອກໄມ້ໄຟ. ອາດຈະເປັນເຫດຜົນວ່າເປັນຫຍັງປະຕູທັງຫມົດຖືກປິດ. ເປີດໃຈຂອງເຈົ້າ ແລະໃຫ້ມັນເລີ່ມຕົ້ນ. ສະນັ້ນງາມຫຼາຍ, ແມ່ນແລ້ວ, ນາງເປັນຄລາສສິກ.

ລາຍການທີ 3

ເນື້ອຫາຕົວຍຶດສໍາລັບຕົວຢ່າງຂອງກຸ່ມລາຍຊື່ scrollspy. ອັນນີ້ກ່ຽວຂ້ອງກັບຂໍ້ 3. ພວກເຮົາໄປສູງກວ່າແລະສູງກວ່າ. ບໍ່​ເຄີຍ​ເປັນ​ຫນຶ່ງ​ໂດຍ​ບໍ່​ມີ​ການ​ອື່ນໆ​, ພວກ​ເຮົາ​ໄດ້​ເຮັດ​ສັນ​ຍາ​. ຂ້ອຍກຳລັງຍ່າງຢູ່ເທິງອາກາດ. ມີຄົນບອກວ່າເຈົ້າໄດ້ລຶບ tattoo ຂອງເຈົ້າອອກ. ດຽວນີ້ຂ້ອຍລອຍຕົວຄືກັບຜີເສື້ອ. ໂຕນ, tan ເຫມາະແລະກຽມພ້ອມ, ເຮັດໃຫ້ມັນຂຶ້ນເຮັດໃຫ້ມັນຫນັກຫນ່ວງ. ເພາະຄັ້ງໜຶ່ງເຈົ້າເປັນຂອງຂ້ອຍ, ເມື່ອເຈົ້າເປັນຂອງຂ້ອຍ. ເຈົ້າ​ຕ້ອງ​ຈູດ​ໄຟ​ໃຫ້​ມັນ​ສ່ອງ​ແສງ! ດັ່ງນັ້ນພວກເຮົາຕີ boulevard ໄດ້. ເຈົ້າເຄີຍຮູ້ສຶກບໍ, ຮູ້ສຶກວ່າເຈ້ຍບາງໆ. ຂ້ອຍເຫັນມັນທັງຫມົດ, ຂ້ອຍເຫັນມັນຕອນນີ້.

ລາຍການທີ 4

ເນື້ອຫາຕົວຍຶດສໍາລັບຕົວຢ່າງຂອງກຸ່ມລາຍຊື່ scrollspy. ອັນນີ້ກ່ຽວຂ້ອງກັບລາຍການທີ 4. Summer ຫຼັງຈາກໂຮງຮຽນມັດທະຍົມຕອນຕົ້ນທີ່ພວກເຮົາພົບກັນຄັ້ງທໍາອິດ. ບໍ່ມີຄວາມຢ້ານກົວໃນປັດຈຸບັນ, ປ່ອຍໃຫ້ໄປແລະພຽງແຕ່ເປັນອິດສະລະ, ຂ້ອຍຈະຮັກເຈົ້າໂດຍບໍ່ມີເງື່ອນໄຂ. ຜິວໜັງທີ່ຖືກແດດຈູບ ຮ້ອນໆ ເຮົາຈະລະລາຍເຂົ້າໜົມຂອງເຈົ້າ. ຄວາມຮັກນີ້ຈະເຮັດໃຫ້ເຈົ້າມີຊີວິດຊີວາ.

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

ການ​ນໍາ​ໃຊ້

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພື່ອ​ເພີ່ມ​ພຶດ​ຕິ​ກໍາ scrollspy ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ໃນ​ການ​ນໍາ​ທາງ topbar ຂອງ​ທ່ານ, ເພີ່ມ data-spy="scroll"​ໃສ່​ອົງ​ປະ​ກອບ​ທີ່​ທ່ານ​ຕ້ອງ​ການ​ທີ່​ຈະ spy ກ່ຽວ​ກັບ (ໂດຍ​ປົກ​ກະ​ຕິ​ຫຼາຍ​ທີ່​ສຸດ​ນີ້​ຈະ​ເປັນ <body>). ຫຼັງຈາກນັ້ນ, ເພີ່ມ data-targetຄຸນລັກສະນະທີ່ມີ ID ຫຼືຊັ້ນຂອງອົງປະກອບຫຼັກຂອງອົງປະກອບ Bootstrap ໃດ .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

ຫຼັງຈາກເພີ່ມ position: relative;ໃນ CSS ຂອງທ່ານ, ໂທຫາ scrollspy ຜ່ານ JavaScript:

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

ຕ້ອງການເປົ້າໝາຍ ID ທີ່ສາມາດແກ້ໄຂໄດ້

ລິ້ງ Navbar ຕ້ອງມີເປົ້າໝາຍ id ທີ່ສາມາດແກ້ໄຂໄດ້. ຕົວຢ່າງ, <a href="#home">home</a>ຕ້ອງສອດຄ່ອງກັບບາງສິ່ງບາງຢ່າງໃນ DOM ເຊັ່ນ <div id="home"></div>.

ອົງປະກອບທີ່ ບໍ່ແມ່ນ :visibleເປົ້າໝາຍຖືກລະເລີຍ

ອົງປະກອບເປົ້າໝາຍທີ່ບໍ່ເປັນ :visibleໄປຕາມ jQuery ຈະຖືກລະເລີຍ ແລະລາຍການ nav ທີ່ສອດຄ້ອງກັນຂອງພວກມັນຈະບໍ່ຖືກເນັ້ນໃສ່.

ວິທີການ

.scrollspy('refresh')

ເມື່ອໃຊ້ scrollspy ສົມທົບກັບການເພີ່ມຫຼືເອົາອົງປະກອບອອກຈາກ DOM, ທ່ານຈະຕ້ອງໂທຫາວິທີການໂຫຼດຫນ້າຈໍຄືນເຊັ່ນ:

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

.scrollspy('dispose')

ທໍາລາຍການເລື່ອນພາບຂອງອົງປະກອບ.

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-, ໃນ data-offset="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
ຊົດເຊີຍ ເລກ 10 pixels ທີ່ຈະຊົດເຊີຍຈາກດ້ານເທິງໃນເວລາທີ່ຄິດໄລ່ຕໍາແຫນ່ງເລື່ອນ.
ວິທີການ ສາຍ ອັດຕະໂນມັດ ຊອກຫາພາກສ່ວນໃດທີ່ອົງປະກອບ spied ຢູ່ໃນ. autoຈະເລືອກວິທີການທີ່ດີທີ່ສຸດເພື່ອຮັບພິກັດເລື່ອນ. offsetຈະໃຊ້ວິທີການຊົດເຊີຍ jQuery ເພື່ອໃຫ້ໄດ້ຮັບຈຸດປະສານງານເລື່ອນ. positionຈະໃຊ້ວິທີການຕໍາແຫນ່ງ jQuery ເພື່ອໃຫ້ໄດ້ຮັບການປະສານງານເລື່ອນ.
ເປົ້າ​ຫມາຍ ຊ່ອຍແນ່ | jQuery object | ອົງປະກອບ DOM ລະບຸອົງປະກອບເພື່ອນຳໃຊ້ Scrollspy plugin.

ເຫດການ

ປະເພດເຫດການ ລາຍລະອຽດ
activate.bs.scrollspy ເຫດການນີ້ຈະດັບໄຟໃສ່ອົງປະກອບເລື່ອນທຸກຄັ້ງທີ່ລາຍການໃໝ່ຖືກເປີດໃຊ້ໂດຍ scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})