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.
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ầu
util.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ộtheight
tậ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 .active
lớ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.
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 quảng cáo xà cạp, 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 từng nghe về chúng do áo hoodie không chứa gluten lo-fi fap aliquip. Labore elit placeat trước khi họ bán hết hàng, terry richardson proident brunch nesciunt quis cosby sweater nghệ nhân nghệ nhân. 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.
Scrollspy cũng hoạt động với các .nav
s lồng nhau. Nếu một con .nav
được làm .active
tổ, 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 thay đổi lớp đang hoạt động.
Mục 1
Bài tập thể dục thể thao ngoại lệ trước đó 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ặt hàng 2-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.
Scrollspy cũng hoạt động với .list-group
s. 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 thể thao ngoại lệ trước đó 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.
Để 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-target
thuộc tính với ID hoặc lớp của phần tử mẹ của bất kỳ .nav
thành phần Bootstrap nào.
Sau khi thêm position: relative;
CSS của bạn, hãy gọi scrollspy qua JavaScript:
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 :visible
mục tiêu bị bỏ qua
Các phần tử mục tiêu không :visible
theo 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.
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:
Phá hủy cuộn giấy của một phần tử.
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. |
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. |