固定元素出現在頁面上時

Question

現在我有，當我滾動到某個元素時，它會固定在我需要的地方，但同時它會從一個地方跳到另一個地方

我需要確保一旦這個元素完全出現在頁面底部，它就會立即被固定，這樣它就不會在以后從一個地方跳到另一個地方

但到目前為止我還沒有找到解決辦法

 $(document).ready(function() { var element = $(".btn"); var height_el = element.offset().top; var element_stop = $(".end"); var height_el_stop = element_stop.offset().top; $(window).scroll(function() { if($(window).scrollTop() > height_el_stop) { element.removeClass("fixed"); } else { if ($(window).scrollTop() > height_el) { element.addClass("fixed"); } else { element.removeClass("fixed"); } } }); });

 .info { margin: 100px auto; text-align: center; }.btn { width: 200px; padding: 12px 50px; background-color: blue; margin: 0 auto; text-align: center; }.fixed { position: fixed; z-index: 99; bottom: 0; left: 50%; transform: translate(-50%, -50%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="btn">button</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info end">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div>

Answer 1

您需要考慮視口高度，例如 window 高度：

 $(document).ready(function() { var height_window = $(window).height(); var element = $(".btn"); var height_el = element.offset().top; var element_stop = $(".end"); var height_el_stop = element_stop.offset().top; console.log(height_window, height_el, height_el_stop) $(window).scroll(function() { let scrollTop = $(window).scrollTop(); if(scrollTop > height_el_stop) { element.removeClass("fixed"); } else if (scrollTop + height_window > height_el) { element.addClass("fixed"); } else { element.removeClass("fixed"); } }); });

 .info { margin: 100px auto; text-align: center; }.btn { width: 200px; padding: 12px 50px; background-color: blue; margin: 0 auto; text-align: center; }.fixed { position: fixed; z-index: 99; bottom: 0; left: 50%; transform: translate(-50%, -50%); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="btn">button</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info end">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div>

Answer 2

你想要的行為很簡單position: sticky; 你只需要在你想要的時候使用 js 來取消它。

 $(document).ready(function() { var element = $(".btn"); var element_stop = $(".end"); var height_el_stop = element_stop.offset().top; $(window).scroll(function() { if ($(window).scrollTop() > height_el_stop) { element.addClass("unstick"); } else { element.removeClass("unstick"); } }); });

 .info { margin: 100px auto; text-align: center; }.btn { width: 200px; padding: 12px 50px; background-color: blue; margin: 0 auto; text-align: center; position: sticky; z-index: 99; top: 100vh; left: 50%; transform: translate(-50%, -100%); }.btn.unstick { position: static; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="btn">button</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info end">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div>

Answer 3

我已經復制了你的代碼並嘗試過，但我不太擅長 CSS。我已經改變了你的 JS 代碼，如下所示：

 $(document).ready(function () { var element = $(".btn"); var height_el = element.offset().top; var element_stop = $(".end"); var height_el_stop = element_stop.offset().top; $(window).scroll(function () { if ($(window).scrollTop() > height_el_stop) { element.removeClass("fixed"); } else { if ($(window).scrollTop() > height_el) { element.css('position','fixed').css('top','0'); } else { element.css('position','static'); } } }); });

 .info { margin: 100px auto; text-align: center; }.btn { width: 200px; padding: 12px 50px; background-color: blue; margin: 0 auto; text-align: center; }.fixed { position: fixed; z-index: 99; bottom: 0; left: 50%; transform: translate(-50%, -50%); }

 <html lang=""> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-w idth, initial-scale=1.0"> <title>fix element</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="btn">button</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info end">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> <div class="info">info</div> </body> </html>