jquery滚动淡出然后显示：无

Question

我正在尝试 fadeOut 包含图像的 DIV，然后将 DIV 切换到 display:none，以便可以单击 DIV 下的链接。

我这样做是因为我希望图像贴在页面的左下方。

我有：

<script>
jQuery(function( $ ){


    function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            $(".mom-son").css({
                  'opacity' : 1-(window_scroll/300)
            });
        }
    }
    $(window).scroll(function() { fade_home_top(); });

});
</script>

理想情况是滚动上的 DIV（因此是图像）fadeOut，然后是 display:none

我正在使用 ScrollTo.js。

这是JSFiddle

Answer 1

jQuery(function( $ ){
    function fade_home_top() {
        if ( $(window).width() > 800 ) {
            var window_scroll = $(this).scrollTop();
            $(".mom-son").css({opacity:1-window_scroll/300});
            if(1-window_scroll/300 <= 0){
                $(".mom-son").css({display:'none'});
            }
            else
            {
                $(".mom-son").css({display:'block'});
            }
        }
    }
    $(window).scroll(fade_home_top);
});

基本上，添加一个检查以查看不透明度是否小于或等于零。如果是，请将显示设置为无。否则，显示块。 window_scroll 应该被声明。另外，传递对函数的引用。无需调用只调用另一个函数的匿名函数。

http://jsfiddle.net/PWLR8/5/

Answer 2

您可以使用 jquery fadeOut 功能。请查看fiddle 并告诉我。

代码片段：

function fade_home_top() {
    if ( $(window).width() > 800 ) {
    window_scroll = $(this).scrollTop();
        if(1-window_scroll/300){
             $(".mom-son").fadeOut();
        }
    }
}

为了检查增加输出窗口宽度，因为我们设置了窗口宽度> 800 检查

更新答案（根据凯的建议）

我现在已经为 else 部分添加了 fadeIn() 来重新打开元素。

Updated Fiddle

更新代码：

function fade_home_top() {
        if ( $(window).width() > 800 ) {
        window_scroll = $(this).scrollTop();
            if (window_scroll >= ($(document).height() - $(window).height()) || window_scroll ==0){
                $(".mom-son").fadeIn();
            }
            else {
                 $(".mom-son").fadeOut();
            }
        }
    }