javascript - 重置 div 的位置有时只能工作

Question

我在动画后使用 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;    
}

Answer 1

所以首先，你有一个语法错误。

我会使用类来解决这个问题，而不是像这样。充其量你会有一个错误的过渡。您可以调整 css 过渡以使其成为您想要的时间。

JS:

$(window).scroll(function() {
 if( $(this).scrollTop() > 500) {       
    $(".animated-logo").addClass('visible');
  } 
 else{
    $(".animated-logo").removeClass('visible');  
 }
});

CSS:

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

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

https://jsfiddle.net/783z9rhm/6/