JS - 到達元素不准確

Question

當用戶到達一個元素時，我想添加一個 css class 。

 var pag_offset = $('.pagination_extra').offset(); $('.pagination-wrapper').addClass('pagination-wrapper-fixed'); $(window).scroll(function() { if($(window).scrollTop() + $(window).height() < $(window).height() + pag_offset.top - 100) { $('.pagination-wrapper').addClass('pagination-wrapper-fixed'); } else { $('.pagination-wrapper').removeClass('pagination-wrapper-fixed'); } });

 .pagination_extra { display: inline-block; width: 100%; }.pagination-wrapper a { text-decoration: none; cursor: pointer; }.pagination-wrapper { text-align: center; margin:auto; width: 50%; }.pagination-wrapper-fixed { position: fixed; bottom: 0; z-index: 7; width: 100%; margin-bottom: 8px; }.pagination { display: inline-block; height: 70px; margin-top: 10px; padding: 0 25px; border-radius: 35px; background-color: #eee; } @media only screen and (max-width: 1199px) {.pagination { height: 50px; padding: 0 10px; border-radius: 25px; } }.page-numbers { display: block; padding: 0 25px; float: left; transition: 300ms ease; color: #595959; font-size: 20px; line-height: 70px; font-family: nazanin; }.page-numbers:hover, .page-numbers.current { background-color: #86c023; color: #fff; }.page-numbers.prev:hover, .page-numbers.next:hover { background-color: transparent; color: #86c023; } @media only screen and (max-width: 1199px) {.page-numbers { padding: 0 15px; font-size: 16px; line-height: 50px; } } @media only screen and (min-width: 120px) and (max-width: 1024px) {.page-numbers { padding: 0 14px; display: none; }.page-numbers:nth-of-type(2) { position: relative; padding-right: 50px; }.page-numbers:nth-of-type(2)::after { content: "..."; position: absolute; font-size: 25px; top: 0; left: 45px; }.page-numbers:nth-child(-n + 3), .page-numbers:nth-last-child(-n + 3) { display: block; }.page-numbers:nth-last-child(-n + 4) { padding-right: 14px; }.page-numbers:nth-last-child(-n + 4)::after { content: none; } }

 <h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="pagination_extra"></div> <div class="pagination-wrapper"> <div class="pagination"> <a class="prev page-numbers">&larr;</a> <a class="page-numbers">1</a> <a class="page-numbers">2</a> <a class="page-numbers">3</a> <a class="page-numbers">4</a> <a class="next page-numbers">&rarr;</a> </div> </div> <h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1><h1>foo<br></h1>

當用戶到達.pagination_extra元素時，它應該添加一個 CSS class。

問題是當它沒有到達將刪除 class 的元素時它是不准確的。

所以我嘗試添加或減去偏移值，例如pag_offset.top - 100 ，但它會在不同的屏幕尺寸上發生變化。

當用戶准確到達.pagination_extra元素時，如何准確地更改 class？

Answer 1

您可以僅使用 CSS 和position: sticky ：

 body { font-family: monospace; }.pagination-wrapper a { text-decoration: none; cursor: pointer; }.pagination-wrapper { position: sticky; text-align: center; margin: 0 auto; top: calc(100vh - 58px); display: flex; justify-content: center; }.pagination { display: inline-block; height: 50px; padding: 0 10px; border-radius: 25px; background-color: #eee; }.page-numbers { display: block; float: left; transition: 300ms ease; color: #595959; padding: 0 15px; font-size: 16px; line-height: 50px; }.page-numbers:hover, .page-numbers.current { background-color: #86c023; color: #fff; }.page-numbers.prev:hover, .page-numbers.next:hover { background-color: transparent; color: #86c023; }.page-numbers { padding: 0 14px; display: none; }.page-numbers:nth-of-type(2) { position: relative; padding-right: 50px; }.page-numbers:nth-of-type(2)::after { content: "…"; position: absolute; font-size: 25px; top: 0; left: 45px; }.page-numbers:nth-child(-n + 3), .page-numbers:nth-last-child(-n + 3) { display: block; }.page-numbers:nth-last-child(-n + 4) { padding-right: 14px; }.page-numbers:nth-last-child(-n + 4)::after { content: none; }

 <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <div class="pagination_extra"></div> <div class="pagination-wrapper"> <div class="pagination"> <a class="prev page-numbers">&larr;</a> <a class="page-numbers">1</a> <a class="page-numbers">2</a> <a class="page-numbers">3</a> <a class="page-numbers">4</a> <a class="next page-numbers">&rarr;</a> </div> </div> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果你想要相反的效果：

 body { font-family: monospace; }.pagination-wrapper a { text-decoration: none; cursor: pointer; }.pagination-wrapper { position: sticky; text-align: center; margin: 0 auto; top: 8px; display: flex; justify-content: center; }.pagination { display: inline-block; height: 50px; padding: 0 10px; border-radius: 25px; background-color: #eee; }.page-numbers { display: block; float: left; transition: 300ms ease; color: #595959; padding: 0 15px; font-size: 16px; line-height: 50px; }.page-numbers:hover, .page-numbers.current { background-color: #86c023; color: #fff; }.page-numbers.prev:hover, .page-numbers.next:hover { background-color: transparent; color: #86c023; }.page-numbers { padding: 0 14px; display: none; }.page-numbers:nth-of-type(2) { position: relative; padding-right: 50px; }.page-numbers:nth-of-type(2)::after { content: "…"; position: absolute; font-size: 25px; top: 0; left: 45px; }.page-numbers:nth-child(-n + 3), .page-numbers:nth-last-child(-n + 3) { display: block; }.page-numbers:nth-last-child(-n + 4) { padding-right: 14px; }.page-numbers:nth-last-child(-n + 4)::after { content: none; }

 <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <div class="pagination_extra"></div> <div class="pagination-wrapper"> <div class="pagination"> <a class="prev page-numbers">&larr;</a> <a class="page-numbers">1</a> <a class="page-numbers">2</a> <a class="page-numbers">3</a> <a class="page-numbers">4</a> <a class="next page-numbers">&rarr;</a> </div> </div> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <p>foo</p> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

無論如何，如果您需要觀察.pagination_extra元素的 position 相對於滾動 position，您可以使用Intersection Observer API以更可靠的方式執行此操作。