固定元素出现在页面上时

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>