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ầ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ộtheighttậ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 sự 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
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Bạn có kiến trúc tốt nhất. Tem hộ chiếu, cô ấy có tính quốc tế. Tốt, tươi mới, dữ dội, chúng tôi đã khóa nó. Không bao giờ dự định rằng một ngày nào đó anh sẽ mất em. Cô ấy ăn thịt trái tim của bạn. Nụ hôn của bạn là vũ trụ, mọi chuyển động đều là ma thuật. Ý tôi là những người, tôi có nghĩa là như cô ấy là một. Chào những người thân yêu hãy cùng tham gia một cuộc hành trình. Chỉ cần sở hữu đêm như ngày 4 tháng 7! Nhưng bạn thà bị lãng phí.
@mdo
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Vì cô ấy là nàng thơ và nghệ sĩ. (Đây là cách chúng tôi làm) Vì vậy, bạn muốn chơi với ma thuật. Vì vậy, chỉ cần chắc chắn trước khi bạn giao tất cả cho tôi. Tôi đang đi bộ, tôi đang đi trên sóng (tối nay). Bỏ qua cuộc nói chuyện, đã nghe tất cả, đã đến lúc đi bộ.
một
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
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Nếu bạn muốn nhảy, nếu bạn muốn tất cả, bạn biết rằng tôi là cô gái mà bạn nên gọi. Tôi sẽ bước qua cơn bão. Vì vậy, hãy để tôi có được bạn trong bộ đồ sinh nhật của bạn. Một trong sô đo đa chạy mât. Tối thứ Sáu tuần trước, tôi nghĩ chúng ta đã phạm luật, luôn nói rằng chúng ta sẽ dừng lại. Vì cô ấy hơi giống Yoko, và cô ấy hơi giống 'Ồ không'. Tôi muốn cái hàm rũ xuống ', cái đập vào mắt', cái đầu quay cuồng ', cái sốc của cơ thể'. Vâng, chúng tôi đã tăng tối đa thẻ tín dụng của mình và bị đuổi khỏi quán bar.
Và một số nội dung giữ chỗ khác, để có biện pháp tốt.
<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>
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 thay đổi lớp đang hoạt động.
Mục 1
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Cái này liên quan đến mục 1. Đưa bạn cao hàng dặm, thật cao, vì cô ấy có nụ cười quốc tế đó. Có một người lạ trên giường của tôi, có một tiếng thình thịch trong đầu tôi. Ôi không. Trong một cuộc sống khác, tôi sẽ khiến bạn ở lại. Vì tôi, tôi có khả năng làm bất cứ điều gì. Chuẩn bị cho cuộc chiến giành vương miện của tôi. Được sử dụng để lấy trộm rượu của cha mẹ bạn và leo lên mái nhà. Giai điệu, rám nắng phù hợp và sẵn sàng, bật nó lên khiến nó nặng nề. Tình yêu của cô ấy giống như một liều thuốc. Tôi đoán rằng tôi đã quên rằng tôi có một sự lựa chọn.
Mục 1-1
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Cái này liên quan đến mục 1-1. Bạn có kiến trúc tốt nhất. Tem hộ chiếu, cô ấy có tính quốc tế. Tốt, tươi mới, dữ dội, chúng tôi đã khóa nó. Không bao giờ dự định rằng một ngày nào đó anh sẽ mất em. Cô ấy ăn thịt trái tim của bạn. Nụ hôn của bạn là vũ trụ, mọi chuyển động đều là ma thuật. Ý tôi là những người, tôi có nghĩa là như cô ấy là một. Chào những người thân yêu hãy cùng tham gia một cuộc hành trình. Chỉ cần sở hữu đêm như ngày 4 tháng 7! Nhưng bạn thà bị lãng phí.
Mục 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
Nội dung trình giữ chỗ cho ví dụ về scrollspy. Cái này liên quan đến mục 3-2. Bạn là bản gốc, không thể thay thế. Cả đêm họ đang chơi, bài hát của bạn. Chúng tôi không thể phủ nhận những cô gái California. Giống như một con chim không có lồng. Không có sợ hãi bây giờ, hãy cho đi và chỉ cần được tự do, tôi sẽ yêu bạn vô điều kiện. Tôi có thể nhìn thấy chữ viết trên tường. Bạn có thể đi du lịch thế giới nhưng không có gì đến gần bờ biển vàng.
<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
Nội dung trình giữ chỗ cho ví dụ về nhóm danh sách không gian cuộn. Cái này liên quan đến mục 1. Không cần xin lỗi. Không có sợ hãi bây giờ, hãy cho đi và chỉ cần được tự do, tôi sẽ yêu bạn vô điều kiện. Đêm thứ Sáu tuần trước. Đừng là một chàng trai nhút nhát, tôi cá là nó rất đẹp. Mùa hè năm sau trung học khi chúng tôi gặp nhau lần đầu. Vì cô ấy là nàng thơ và nghệ sĩ. Gì? Chờ đợi. Tưởng rằng mình là ngoại lệ.
Mặt hàng 2
Nội dung trình giữ chỗ cho ví dụ về nhóm danh sách không gian cuộn. Cái này liên quan đến mục 2. Yeah, cô ấy nhảy theo nhịp của riêng mình. Ôi không. Bạn có thể là người vĩ đại nhất. Vì em yêu, anh là pháo hoa. Có thể là một lý do tại sao tất cả các cửa được đóng lại. Hãy mở rộng trái tim của bạn và chỉ để nó bắt đầu. Vì vậy, thật sang trọng, vâng, cô ấy là một người cổ điển.
Mặt hàng 3
Nội dung trình giữ chỗ cho ví dụ nhóm danh sách không gian cuộn. Cái này liên quan đến mục 3. Chúng ta ngày càng đi cao hơn. Không bao giờ thiếu người kia, chúng tôi đã thực hiện một hiệp ước. Tôi đang đi trên không trung. Ai đó nói rằng bạn đã xóa hình xăm của bạn. Bây giờ tôi đang trôi nổi như một con bướm. Giai điệu, rám nắng phù hợp và sẵn sàng, bật nó lên khiến nó nặng nề. Vì một khi bạn là của tôi, một khi bạn là của tôi. Bạn chỉ cần đốt cháy ánh sáng và để nó tỏa sáng! Vì vậy, chúng tôi đến đại lộ. Bạn có bao giờ cảm thấy, cảm thấy giấy mỏng như vậy. Tôi thấy tất cả, tôi thấy nó bây giờ.
Mặt hàng 4
Nội dung trình giữ chỗ cho ví dụ nhóm danh sách không gian cuộn. Cái này liên quan đến mục 4. Mùa hè sau trung học khi chúng tôi gặp nhau lần đầu. Không có sợ hãi bây giờ, hãy cho đi và chỉ cần được tự do, tôi sẽ yêu bạn vô điều kiện. Làn da được tiếp xúc với ánh nắng quá nóng, chúng tôi sẽ làm tan chảy lớp kem của bạn. Tình yêu này sẽ khiến bạn bay bổng.
<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 trên 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')
Phá hủy 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 xuố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 | chuỗi | đối tượng jQuery | Phần tử DOM | 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...
})