javascript - 使粘性 div 达到一定程度

Question

我试图让一个 div 在他到达某个 div 时开始固定，并在他击中另一个 div 时停止粘滞，但保持在他离开的位置。粘性 div 应该停止的 div 的位置可以是任何地方，具体取决于文章的长度。我可以让它在一个决议上工作，但在其他决议上就不行了。

令人惊讶的是，大部分时间固定都有效，但“停止固定”部分大部分不起作用(我的 div 只是在高度上搞砸了)。

这是我的代码:

$(document).scroll(function() {
   var topOfLastDiv = ($("#scroll_to").position().top)-630;
   var topOfFirstDiv = ($("#tour_user_info").position().top)+20;
   var topOfLastDivSocial = topOfLastDiv+100;
   var y = $(document).scrollTop(),
       header = $("#tour_price_map");
       social_media = $('#social_media_sticky');

   if (y < topOfFirstDiv) {
       header.css({position: "relative", "top" : "0px", "transform": "translateX(0)"});
       header.fadeIn(100);
       social_media.fadeOut(100);
   }
   if(y >= topOfFirstDiv && y<topOfLastDiv)  {
       social_media.fadeIn(100);
       header.css({position: "fixed", "top" : "50px", "transform": "translateX(216.2%)"});
   }
   if (y >= topOfLastDiv && y < topOfLastDivSocial) {
       header.css({position: "relative", "top" : topOfLastDiv-520, "transform": "translateX(0)"});
   }
   if (y>= topOfLastDivSocial) {
       social_media.fadeOut(100);
       header.css({position: "relative", "top" : topOfLastDiv-520, "transform": "translateX(0)"});
   }
});

代码中的随机数是我试图使其适合我的笔记本电脑的分辨率，这在当时效果很好。

我在这里错过了什么？

Answer 1

我通过在最后 2 个 if 子句中使用“绝对”而不是“相对”来修复它，并相应地调整了“top”和“transform”。