[英]fixed element when it appears on the page
Now I have, when I scroll to a certain element, it is then fixed in the place I need, but at the same time it jumps from one place to another现在我有,当我滚动到某个元素时,它会固定在我需要的地方,但同时它会从一个地方跳到另一个地方
I need to make sure that as soon as this element completely appears at the bottom of the page, it is immediately fixed so that it does not jump from one place to another later我需要确保一旦这个元素完全出现在页面底部,它就会立即被固定,这样它就不会在以后从一个地方跳到另一个地方
But so far I haven't been able to find a solution但到目前为止我还没有找到解决办法
$(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>
You need to take into account the viewport height, eg window height:您需要考虑视口高度,例如 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>
The behavior you want is simple with position: sticky;
你想要的行为很简单position: sticky;
You only need to use js to unstick it when you want.你只需要在你想要的时候使用 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>
I have reproduced your code and tried but i am not really good at CSS. I have changed bit of your JS code as follows:我已经复制了你的代码并尝试过,但我不太擅长 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.