in English

Scrollspy

อัปเดตการนำทาง Bootstrap หรือส่วนประกอบกลุ่มรายการโดยอัตโนมัติตามตำแหน่งการเลื่อนเพื่อระบุว่าลิงก์ใดที่ใช้งานอยู่ในวิวพอร์ต

มันทำงานอย่างไร

Scrollspy มีข้อกำหนดบางประการเพื่อให้ทำงานได้อย่างถูกต้อง:

  • หากคุณกำลังสร้าง JavaScript จากแหล่งที่มา มันต้องการutil.js .
  • ต้องใช้กับคอมโพเนนต์การนำ ทาง Bootstrap หรือกลุ่มรายการ
  • Scrollspy ต้องการposition: relative;องค์ประกอบที่คุณกำลังสอดแนม โดยปกติแล้ว ไฟล์<body>.
  • เมื่อสอดแนมองค์ประกอบอื่นที่ไม่ใช่<body>ตรวจสอบให้แน่ใจว่าได้heightตั้งค่าและoverflow-y: scroll;นำไปใช้
  • จำเป็นต้องมีจุด ยึด ( <a>) และต้องชี้ไปที่องค์ประกอบidด้วย

เมื่อใช้งานสำเร็จ ระบบนำทางหรือกลุ่มรายการของคุณจะอัปเดตตามนั้น โดยย้าย.activeคลาสจากรายการหนึ่งไปยังรายการถัดไปตามเป้าหมายที่เกี่ยวข้อง

ตัวอย่างในแถบนำทาง

เลื่อนพื้นที่ด้านล่างแถบนำทางและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่ รายการดรอปดาวน์จะถูกเน้นด้วย

@อ้วน

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่าง scrollspy คุณได้รับสถาปัตยกรรมที่ดีที่สุด แสตมป์พาสปอร์ต เธอเป็นสากล ดี สด ดุ เราได้ล็อคไว้ ไม่เคยวางแผนว่าวันหนึ่งฉันจะเสียคุณไป เธอกินหัวใจของคุณออก จูบของคุณคือจักรวาล ทุกการเคลื่อนไหวคือเวทย์มนตร์ ฉันหมายถึงพวกนั้น ฉันหมายถึงเหมือนเธอนั่นแหละ ทักทายคนที่รัก ไปเที่ยวกัน แค่เป็นเจ้าของคืนเหมือนวันที่ 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 ยังใช้งานได้กับ nested .navs ถ้าซ้อนกัน.navอยู่.activeผู้ปกครองก็จะ.activeเป็น เลื่อนพื้นที่ถัดจากแถบนำทางและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่

รายการที่ 1

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่าง scrollspy อันนี้เกี่ยวข้องกับข้อ 1 ทำให้คุณสูงเป็นไมล์ สูงมาก เพราะเธอมีรอยยิ้มแบบสากล มีคนแปลกหน้าอยู่บนเตียงของฉัน ฉันรู้สึกปวดหัว ไม่นะ. ในอีกชีวิตหนึ่งฉันจะทำให้คุณอยู่ เพราะฉัน ฉันทำได้ทุกอย่าง เตรียมพร้อมสำหรับการต่อสู้อันยอดเยี่ยมของฉัน ใช้เพื่อขโมยเหล้าของพ่อแม่แล้วปีนขึ้นไปบนหลังคา ปรับโทนสีผิวแทนให้พอดีและพร้อม เร่งขึ้นเพราะมันหนัก ความรักของเธอก็เหมือนยา ฉันเดาว่าฉันลืมไปว่าฉันมีทางเลือก

รายการ 1-1

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่าง scrollspy อันนี้เกี่ยวข้องกับข้อ 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

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่าง 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>

ตัวอย่างกับ list-group

Scrollspy ยังใช้งานได้กับ.list-groups เลื่อนพื้นที่ถัดจากกลุ่มรายการและดูการเปลี่ยนแปลงชั้นเรียนที่ใช้งานอยู่

รายการที่ 1

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่างกลุ่มรายการ scrollspy อันนี้เกี่ยวข้องกับข้อ 1 ไม่จำเป็นต้องขอโทษ ตอนนี้ไม่มีความกลัว ปล่อยวางและเป็นอิสระ ฉันจะรักคุณโดยไม่มีเงื่อนไข คืนวันศุกร์ที่ผ่านมา. อย่าเป็นคนขี้อายเลย ฉันพนันได้เลยว่าสวย ฤดูร้อนหลังมัธยมเมื่อเราพบกันครั้งแรก เพราะเธอคือท่วงทำนองและศิลปิน อะไร รอ. คิดว่าฉันเป็นข้อยกเว้น

รายการที่ 2

เนื้อหาตัวยึดตำแหน่งสำหรับตัวอย่างกลุ่มรายการ scrollspy อันนี้เกี่ยวข้องกับข้อ 2 ใช่ เธอเต้นตามจังหวะของเธอเอง ไม่นะ. คุณอาจจะยิ่งใหญ่ที่สุด เพราะที่รัก คุณคือดอกไม้ไฟ อาจเป็นเหตุผลที่ประตูทุกบานปิดลง เปิดใจของคุณและปล่อยให้มันเริ่มต้น ดูเก๋ไก๋มาก เธอคลาสสิก

รายการที่ 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>

การใช้งาน

ผ่านแอตทริบิวต์ข้อมูล

หากต้องการเพิ่มลักษณะการทำงานของ scrollspy ให้กับการนำทางบนแถบด้านบนของคุณอย่างง่ายดาย ให้เพิ่มdata-spy="scroll"องค์ประกอบที่คุณต้องการสอดแนม (โดยทั่วไปแล้วจะเป็น<body>) จากนั้นเพิ่มdata-targetแอตทริบิวต์ด้วย ID หรือคลาสขององค์ประกอบหลักขององค์ประกอบ.navBootstrap

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>

ผ่านจาวาสคริปต์

หลังจากเพิ่ม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จะถูกละเว้นและรายการนำทางที่เกี่ยวข้องจะไม่ถูกเน้น

วิธีการ

.scrollspy('refresh')

เมื่อใช้ scrollspy ร่วมกับการเพิ่มหรือลบองค์ประกอบออกจาก DOM คุณจะต้องเรียกวิธีการรีเฟรชดังนี้:

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

.scrollspy('dispose')

ทำลาย scrollspy ขององค์ประกอบ

ตัวเลือก

ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-เช่นเดียวกับในdata-offset="".

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย
offset ตัวเลข 10 พิกเซลจะชดเชยจากด้านบนเมื่อคำนวณตำแหน่งของการเลื่อน
กระบวนการ สตริง รถยนต์ ค้นหาว่าองค์ประกอบที่สอดแนมอยู่ในส่วนใดautoจะเลือกวิธีที่ดีที่สุดในการรับพิกัดการเลื่อน offsetจะใช้วิธีออฟเซ็ต jQuery เพื่อรับพิกัดการเลื่อน positionจะใช้วิธีตำแหน่ง jQuery เพื่อรับพิกัดการเลื่อน
เป้า สตริง | วัตถุ jQuery | องค์ประกอบ DOM ระบุองค์ประกอบที่จะใช้ปลั๊กอิน Scrollspy

เหตุการณ์

ประเภทงาน คำอธิบาย
activate.bs.scrollspy เหตุการณ์นี้เริ่มทำงานกับองค์ประกอบการเลื่อนเมื่อใดก็ตามที่รายการใหม่เปิดใช้งานโดย scrollspy 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})