css - 在某个滚动点固定 div，然后在另一个滚动点取消固定

Question

我在一个带有 div 的网站上工作，我想在某个滚动点修复它，但随后在另一个滚动点变得不固定。我看过其他类似的帖子，了解如何在某些点修复 div，但仅此而已我要创建的事件的第一部分。我的网站也是水平滚动的，我看过的所有帖子都是垂直滚动的。

我是 Javascript 的初学者，所以甚至不知道从哪里开始编写代码!但我本质上想要这个:

/* When scrolling left  */
if (div >= 300 && div <= 600)
  position = fixed;
else 
  position = absolute;

任何帮助将不胜感激!

谢谢

更新:

我已经解决了! :D 这有点草率，可能不是有史以来最干净/最高效的代码，但它可以满足我的需要:

$(window).scroll(function(){
if  ($(window).scrollLeft() <= 3600){
     $('#section2').css({position:'relative'});
} 
});

$(window).scroll(function(){
if  ($(window).scrollLeft() >= 3600){
     $('#section2').css({position:'fixed',padding:'0px',margin:'0px',});

} 
});

$(window).scroll(function(){
if  ($(window).scrollLeft() >= 4900){
     $('#section2').css({position:'relative', paddingLeft:'1200px'});
} 
});

我只是使用“if”语句而不是“if”和“else”来将 div 设置为固定位置前后的相对值。

Answer 1

没有办法用纯 CSS 做到这一点，但看看这个 jQuery 插件 http://stickyjs.com .

$(function(){
  $('div').sticky(options);
})