jQuery滚动功能从特定高度开始

Question

这其实是两个问题:

1. 为什么从 display:none; 到 display:block; 的 1s 转换不起作用？
2. 如何使此滚动功能仅在从顶部滚动 200px 后发生，即在滚动过“红色框”之后发生？

非常感谢任何帮助，非常感谢!

$(window).scroll(function() {
    $('#menu').css('display', 'block');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
       $('#menu').css('display', 'none');
    }, 1500));
});

html {
   padding:0;margin:0;
}
body {
    height:2000px
}
#redBox{ 
    height:200px;
    width:100%;
    background:red;
    float:left;
    color:white;
    text-align:center;
    line-height:8em;
    font-size:1.2em;
}
#menu {
    position:fixed;
    top:0;
    width: 100%;
    height: 200px;
    background: navy;
    opacity: .5;
    color:white;
    text-align:center;
    line-height:8em;
    font-size:1.2em;	
    display: none;
    -webkit-transition:all 1s;
    transition:all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="redBox">scroll function should start below this box (height: 200px)</div>
<div id="menu">scroll menu</div>

Answer 1

1) 您可以使用 jQuery fadeIn 和 fadeOut

2) 或者

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 200) {
        $('#menu').fadeIn('slow');
        clearTimeout($.data(this, 'scrollTimer'));
        $.data(this, 'scrollTimer', setTimeout(function () {
            $('#menu').fadeOut('slow');
        }, 1500));
    }else{
        clearTimeout($.data(this, 'scrollTimer'));
        $('#menu').fadeOut('slow');
    }
});

https://jsfiddle.net/uqpamt4z/