javascript - 根据窗口位置淡入淡出 div

Question

我正在尝试淡入 <div> s 类 .cms和 .seo当进入 ID 为“services”的部分时，当通过该部分或之前时淡出。

如果可能的话，我还希望它根据滚动位置设置动画。

我给你链接，你可以自己检查网站。

对于动画，我使用 animate.css

javascript 代码在 js/agency.js 中

Site

这是我一直在尝试的代码..

$(window).scroll(function() {
    var y=$(window).scrollTop();
    if (y < 1092){
    $('.cms,.seo').addClass('animated fadeOutRight');  
  }
  if (y > 1092 && y < 1300) {
    $('.cms,.seo').addClass('animated fadeInRight');
  }     
  if (y > 1300){
    $('.cms,.seo').addClass('animated fadeOutRight');  
  }
});

我还想知道它是否适用于不同的窗口大小，或者我是否必须更改代码？

谢谢!!

Answer 1

它淡出是因为if (y < 1092)滚动后即为真。

您可能只想在 fadeInRight 确实存在于元素上时才使用 fadeOutRight，这样它就不会立即隐藏，所以:

if (y < 1092 && $('.cms,.seo').hasClass('fadeInRight'))

此外，由于您的 animated 类仅指定元素的动画方式，因此请立即将其应用于元素，而不是附加 javascript。

请参阅此 fiddle 的工作示例:https://jsfiddle.net/pjh6gy7e/

除非您相应地更改元素的高度，否则它应该适用于大多数窗口大小。