javascript - 向下滚动时淡入元素，向上滚动时淡出

Question

我试图在这个案例部分的特定部分内实现滚动淡入，id 是 test。

fadeIn 在没有 if 语句的情况下工作正常，但我认为我需要用它来识别部分。我也在努力做的是当鼠标向上滚动时有相同的类 fadeOut。

我是 Jquery 的新手，非常感谢您的帮助。

CSS

.third_third { display:none; width: 100%; height: 150px; margin-bottom: 3%; }

j查询

$(document).ready(function() {
    if ($('section#test:visible')) {
        $(document).scroll(function() {
            $('.third_third').css("display", "inline-block").fadeIn(2000);
        });
    });
});

Answer 1

使 div 在向下滚动一定数量的像素后出现。淡入过渡是使用 CSS 完成的。

这将是您的 jQuery 代码:

var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 100) {
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});

这里我设置了一个jsFiddle例如