Question

当他到达某个div时，我试图让div开始修复，并且当他击中另一个div时停止粘性，但保持在他离开的位置。粘滞div应该停止的div的位置可以是任何位置，具体取决于文章长度。我可以让它在一个决议上工作，但在其他决议上却没有那么多。

令人惊讶的是，大多数情况下修复工作，但是＆＃34;停止修复＆＃34;部分大部分都不起作用（我的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”。

使粘性div达到一定程度

1 个答案: