向下滚动淡入元素，向上滚动淡出

Question

我正在尝试在本例的特定部分内实现滚动衰落，id为test的部分。

没有if语句，fadeIn可以正常工作，但是我认为我需要使用它来标识该部分。 我还要努力做的是，当鼠标向上滚动时，具有相同的class fadeOut。

我在Jquery上还很新，很感谢您的帮助。

CSS

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

jQuery的

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

Answer 1

向下滚动一定数量的像素后，使div出现。 fadeIn过渡是使用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为例

Answer 2

请缩进您的代码！ 使其更容易阅读。也许尝试这样的方法： http : //jsfiddle.net/j5q0tu86/4/

$(document).ready(function () {
    $('.wrapper').bind('mousewheel', function (e) {

        if (e.originalEvent.wheelDelta < 0) {
            $('.third_third').stop(true, true).fadeIn(300);
            console.log('Scrolling Down');

        } else {
            $('.third_third').stop(true, true).fadeOut(300);
            console.log('Scrolling Up');
        }
    });
});

Answer 3

要标识您的元素，请使用以下命令：

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