Question

我正在尝试在此案例部分的特定部分内实现滚动淡入淡出，其中id为test。

如果没有if语句，fadeIn工作正常，但我认为我需要让它来识别该部分。我还在努力做的是当鼠标向后滚动时，使用相同的类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);
    });     
});

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

3 个答案: