Javascript 使用Jquery根据移动div。根据窗口滚动。滚动

我试图实现的是在用户滚动经过一定数量的像素后，从左侧显示一个

div

。然后，当它经过另一个点时，它向右移动并再次消失。然后，如果用户向上滚动以使

div

反向移动

我遇到的问题是，当

div

移动到右侧时，它会扩展视图，这与它在左侧时不同。我尝试过将左值更改为右值，但没有任何效果

以下是我到目前为止为jQuery编写的代码：

window.addEventListener('scroll', function() {
  if (window.scrollY <= 50) {
    $('#leftinfo').animate({left: '-150%'});
  }
  else if (window.scrollY >= 50 && window.scrollY <= 200){
    $('#leftinfo').animate({left: '25%'}, 'swing');
  } 
  else if (window.scrollY >= 200) {
    $('#leftinfo').animate({left: '100%'}, 'swing');
  }
});

window.addEventListener（'scroll'，function（）{
如果（window.scrollY=50&&window.scrollY=200）{
$（#leftinfo'）。动画（{left:'100%}，'swing'）；
}
});

我还有一个指向JS垃圾箱的链接。这是

将此添加到您的CSS中：

#main-content {
   overflow-x:hidden;
}

这将阻止父div动态调整大小以适应其子级

您可以在此处阅读有关溢出属性的更多信息：

---

首先，同一对象上的jQuery动画按先到先得的顺序排队执行。您需要首先通过调用

.stop（）

来停止它们，以清除动画队列，以便立即执行新动画

其次，为了防止窗口扩展可滚动区域，您需要指示html主体隐藏溢出其边界的元素，但仅在x轴上

window.addEventListener（'scroll'，function（）{
如果（window.scrollY=50&&window.scrollY=200）{
控制台日志（“第三阶段”）；
$（“#leftinfo”）.stop（）.animate({
左：“100%”
}"摇摆",；
}
});
正文{
保证金：0；
高度：75雷姆；
宽度：自动；
浮动：对；
显示：内联块；
溢出x：隐藏；
}
弗朗蒂诺先生{
边框：1px纯黑；
背景色：#FFFFFF；
填充：1rem；
显示：内联块；
颜色：#000000；
边界半径：15px；
}
#左信息{
位置：绝对位置；
顶部：15雷姆；
宽度：65%；
z指数：100；
左-150%；
}
#左信息{
字号：2rem；
文本对齐：居中；
}
#rightinfo{
浮动：对；
位置：相对位置；
保证金：5雷姆；
宽度：35%；
}
#rightinfo p{
字体大小：1.5rem；
文本对齐：居中；
}
#首先{
背景#c6bea6；
背景尺寸：封面；
颜色：白色；
身高：52雷姆；
保证金：0自动；
填充：0；
位置：相对位置；
z指数：300；
}
#第二{
背景：#9e9e9e；
背景尺寸：封面；
颜色：白色；
高度：800px；
保证金：0自动；
溢出：隐藏；
填充：0；
位置：相对位置；
z指数：200；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳·卢克图斯·弗林吉亚元素。整数malesuada justo id bibendum Dignessim

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳·卢克图斯·弗林吉亚元素。整数malesuada justo id bibendum Dignessim。紫穗慈姑。turpis tincidunt egestas的Pellentsque tincidunt直径

您可以尝试此代码

window.addEventListener('scroll', function() {
  var offset = $('#first').offset();
  var height = $('#first').height();
  var computed = parseInt((offset.top + height) / (height / 2));
  if (window.scrollY < computed) {
     $('#leftinfo').stop().animate({left: '-150%'});
  } else if (window.scrollY >= computed && window.scrollY < parseInt((offset.top + height) / 2)) {
     $('#leftinfo').stop().animate({left: '25%'}, 'swing');
  } else if (window.scrollY >= parseInt((offset.top + height) / 2)) {
     $('#leftinfo').stop().animate({left: '100%'}, 'swing');
  }
});

window.addEventListener（'scroll'，function（）{
var offset=$（'#first'）。offset（）；
var height=$（'#first'）.height（）；
计算的var=parseInt（（offset.top+height）/（height/2））；
if（window.scrollY=computed&&window.scrollY=parseInt（（offset.top+height）/2））{
$（'#leftinfo'）.stop（）.animate（{left:'100%}，'swing'）；
}
});