Source

Scrollspy

Tự động cập nhật điều hướng Bootstrap hoặc các thành phần nhóm danh sách dựa trên vị trí cuộn để cho biết liên kết nào hiện đang hoạt động trong khung nhìn.

Làm thế nào nó hoạt động

Scrollspy có một số yêu cầu để hoạt động bình thường:

  • Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js .
  • Nó phải được sử dụng trên một thành phần hoặc nhóm danh sách Bootstrap nav .
  • Scrollspy yêu cầu position: relative;phần tử bạn đang theo dõi, thường là <body>.
  • Khi theo dõi các phần tử khác với phần tử <body>, hãy đảm bảo có một heighttập hợp và overflow-y: scroll;áp dụng.
  • Anchors ( <a>) là bắt buộc và phải trỏ đến một phần tử cùng với đó id.

Khi được triển khai thành công, điều hướng hoặc nhóm danh sách của bạn sẽ cập nhật tương ứng, chuyển .activelớp từ mục này sang mục tiếp theo dựa trên các mục tiêu được liên kết của chúng.

Ví dụ trong thanh điều hướng

Cuộn khu vực bên dưới thanh điều hướng và xem thay đổi lớp đang hoạt động. Các mục thả xuống cũng sẽ được đánh dấu.

@mập mạp

Bàn phím xà cạp quảng cáo, bữa tiệc nửa buổi id nghệ thuật dolor labore. Pitchfork yr enim lo-fi trước khi họ bán hết. Tumblr farm-to-table xe đạp quyền bất cứ điều gì. Anim keffiyeh carles cardigan. Gian hàng ảnh 3 con sói mặt trăng của Velit seitan mcsweeney. Cosby áo len lomo quần short jean, williamsburg hoodie minim qui có thể bạn chưa nghe nói về chúng et cardigan quỹ tín thác quần áo culpa biodiesel wes anderson thẩm mỹ. Nihil hình xăm tố cáo, tín dụng mỉa mai biodiesel keffiyeh nghệ nhân ullamcoequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa bất cứ thứ gì xe tải đồ ăn ngon. Sapiente synth id giả định. Locavore sed helvetica mỉa mai châm biếm, những chiếc áo khoác sấm sét mà bạn có thể chưa nghe nói về chúng do áo hoodie không chứa gluten lo-fi fap aliquip. Labore elit placeat trước khi bán hết hàng, terry richardson proident brunch nesciunt quis cosby sweater nghệ nhân của nghệ nhân p Cosre elit keffiyeh ut helvetica. Cardigan bia thủ công seitan velit làm sẵn. VHS chambray labris tempor veniam. Hoạt hình mollit minimine hàng hóa ullamco Thundercats.

<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-haspopup="true" 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>

Ví dụ với điều hướng lồng nhau

Scrollspy cũng hoạt động với các .navs lồng nhau. Nếu một con .navđược làm .activetổ, bố mẹ của nó cũng sẽ như vậy .active. Cuộn khu vực bên cạnh thanh điều hướng và xem sự thay đổi lớp đang hoạt động.

Mục 1

Bài tập thể dục ngoại trừ hậu quả của bài tập ngoại lệ aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Làm aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat labourum incididunt tempor euequat enim dolore proident. Qui labour do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reploynderit adipisicing dolore ut effectat desunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat goodso velit ut eiusmod cupidatat elit dolore.

Mục 1-1

Amet tempor mollit aliquip pariesur excepteur Goodso do ea cillum Goodso Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco Desunt. Aliqua cillum excepteur irureequat id quis ea. Ngồi tự tin ullamco aute magna pariesur nostrud labre. Reperinderit aliqua Goodso eiusmod aliquip est do duis amet proident magna consecteturequat eu Goodso fugiat non quis. Enim aliquip tập thể dục ullamco adipisicing voluptate excepteur tập thể dục tối thiểu tối thiểu hàng hóa tối thiểu adipisicing tập thể dục officia nisi adipisicing. Hoạt hình id duis quiequat labore adipisicing sint dolor elit cillum anim et fugiat.

Mục 1-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sit culpa goodso elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reploynderit do. Mollit excepteur eu Lorem ipsum anim Goodso sint labre Lorem trong tập thể dục velit incididunt. Occaecat consectetur nisi trong occaecat proident minim enim sunt reploynderit tập thể dục cupidatat et do officia. Aliquipequat ad labore labore mollit ut amet. Ngồi p Cosy tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

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

Ví dụ với nhóm danh sách

Scrollspy cũng hoạt động với .list-groups. Cuộn khu vực bên cạnh nhóm danh sách và xem sự thay đổi lớp đang hoạt động.

Mục 1

Bài tập thể dục ngoại trừ hậu quả của bài tập ngoại lệ aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Làm aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat labourum incididunt tempor euequat enim dolore proident. Qui labour do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reploynderit adipisicing dolore ut effectat desunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat goodso velit ut eiusmod cupidatat elit dolore.

Mặt hàng 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Labourumequat không elit enim tập thể dục cillum aliquaUCTat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco desunt sit enim elit aliqua esse irure. Labourum nisi sit est tempor labourum mollit labore officia labourum excepteur Goodso non Goodso dolor excepteur Goodso. Ipsum fugiat ex est consectetur ipsum goodso tempor sunt in proident.

Mặt hàng 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reploynderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reploynderit. Deserunt tempor mollit elit ex pariesur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Mặt hàng 4

Quis anim sit do amet fugiat dolor velit sit ea ea do reploynderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reploynderit. Deserunt tempor mollit elit ex pariesur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

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

Cách sử dụng

Qua các thuộc tính dữ liệu

Để dễ dàng thêm hành vi cuộn tròn vào điều hướng thanh trên cùng của bạn, hãy thêm data-spy="scroll"vào phần tử bạn muốn theo dõi (thông thường nhất sẽ là phần tử này <body>). Sau đó, thêm data-targetthuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .navthành phần Bootstrap nào.

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>

Qua JavaScript

Sau khi thêm position: relative;CSS của bạn, hãy gọi scrollspy qua JavaScript:

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

Mục tiêu ID có thể phân giải bắt buộc

Các liên kết thanh điều hướng phải có các mục tiêu id có thể phân giải được. Ví dụ, một <a href="#home">home</a>phải tương ứng với một cái gì đó trong DOM như <div id="home"></div>.

Các phần tử không phải :visiblemục tiêu bị bỏ qua

Các phần tử mục tiêu không :visibletheo jQuery sẽ bị bỏ qua và các mục điều hướng tương ứng của chúng sẽ không bao giờ được đánh dấu.

Phương pháp

.scrollspy('refresh')

Khi sử dụng scrollspy kết hợp với việc thêm hoặc xóa các phần tử khỏi DOM, bạn sẽ cần gọi phương thức làm mới như sau:

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

.scrollspy('dispose')

Hủy bỏ cuộn giấy của một phần tử.

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-offset="".

Tên Loại hình Mặc định Sự mô tả
bù lại con số 10 Điểm ảnh để bù đắp từ trên cùng khi tính toán vị trí của cuộn.
phương pháp sợi dây Tự động Tìm phần tử do thám nằm trong phần nào. autoSẽ chọn phương pháp tốt nhất để lấy tọa độ cuộn. offsetsẽ sử dụng phương thức bù đắp jQuery để lấy tọa độ cuộn. positionsẽ sử dụng phương thức jQuery position để lấy tọa độ cuộn.
Mục tiêu sợi dây Chỉ định phần tử để áp dụng plugin Scrollspy.

Sự kiện

Loại sự kiện Sự mô tả
active.bs.scrollspy Sự kiện này kích hoạt trên phần tử cuộn bất cứ khi nào một mục mới được kích hoạt bởi phần tử cuộn. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})