Javascript 重置div'；这个职位有时才起作用

我在动画后用jquery重置div的左位置时遇到问题。我正在尝试将一个div从屏幕外（左）设置为屏幕上的动画。但是，我只想在窗口scrollTop的值大于某个值时触发此动画。一旦scrollTop的值小于该值，我希望div的位置改变，使其再次脱离屏幕。这是有效的，但只是有时，我不知道为什么。我还将div的位置设置为绝对，同时将其设置为离开屏幕，此更改始终有效！。下面是我试图制作动画的div的代码和CSS。谢谢大家!

更改滚动位置的功能

$(window).scroll(function() {
 if( $(this).scrollTop() > 500 {       
  $(".animated-logo").css({position:'fixed'});
  $(".animated-logo").animate({left: '20px'},500);
  } 
 else{
  $('.animated-logo').css({position: 'absolute',left:'-150px'}); 
  }
});

动画徽标元素的CSS

.animated-logo
{   
  position:absolute; 
  top:0; 
  left:-150px; 
  width:100px; 
  z-index:2;    
}

---

首先，你有一个语法错误

我会使用类来解决这个问题，而不是像这样做。充其量你会有一个马车式的过渡。您可以调整css转换，使其成为您所需的时间

JS:

CSS:

---

首先，您有一个语法错误

我会使用类来解决这个问题，而不是像这样做。充其量你会有一个马车式的过渡。您可以调整css转换，使其成为您所需的时间

JS:

CSS:

当你说这是可行的，但只是有时，我不知道为什么，它不确定问题是什么，所以我假设你在动画第一次运行后遇到了问题。这可能是因为你在每个用户的滚动动作上都触发了它，这是非常多的。每次超过500px阈值时，使用一个标志只触发一次将消除该故障

嗨

var-visible=false；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>500）{
如果（！可见）{
可见=真实；
$（“.animated logo”）.css（{位置：'fixed'}）；
$（“.animated logo”）.animate（{left:'20px'}，500）；
} 
}
否则{
可见=假；
$（'.animated logo'）.css（{position:'absolute'，left:'-150px'}）；
}
});
。动画徽标
{   
位置：绝对位置；
排名：0；
左：-150px；
宽度：100px；
高度：100px；
z指数：2；
背景：红色
}
























































































当你说这是可行的，但只是有时，我不确定为什么，它不确定问题是什么，所以我假设你在动画第一次运行后遇到了问题。这可能是因为你在每个用户的滚动动作上都触发了它，这是非常多的。每次超过500px阈值时，使用一个标志只触发一次将消除该故障

嗨


var-visible=false；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>500）{
如果（！可见）{
可见=真实；
$（“.animated logo”）.css（{位置：'fixed'}）；
$（“.animated logo”）.animate（{left:'20px'}，500）；
} 
}
否则{
可见=假；
$（'.animated logo'）.css（{position:'absolute'，left:'-150px'}）；
}
});
。动画徽标
{   
位置：绝对位置；
排名：0；
左：-150px；
宽度：100px；
高度：100px；
z指数：2；
背景：红色
}
























































































你能创建一个小片段吗？你能创建一个小片段吗？太好了。非常感谢。完美的非常感谢。
$(window).scroll(function() {
 if( $(this).scrollTop() > 500) {       
    $(".animated-logo").addClass('visible');
  } 
 else{
    $(".animated-logo").removeClass('visible');  
 }
});

.animated-logo{   
  position:absolute; 
  top:0; 
  left:-150px; 
  width:100px; 
  z-index:2;
  transition:0.5s;
}

.animated-logo.visible{
  position:fixed;
  left:20px;
}