jQuery滚动功能，开始在特定的高度

Question

这实际上是两个问题:

1. 为什么从display:none;到display:block;的1s转换不工作?
2. 我怎样才能使这个滚动功能只发生在scrolling 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/

Answer 2

回答1。它是不可能动画的"显示"属性，因为它需要是一个数字值，它不是由浏览器呈现的，当不透明的动画，通常最好使用可见:隐藏/可见，但这可能意味着你需要切换元素的z-index，使隐藏元素是不可点击的

回答2.

$(window).scroll(function() {
    var ScrollTop = $(window).scrollTop();
    if (ScrollTop > 200) {
      ....
    }
});

注意:当使用滚动事件时，你可能会遇到各种性能问题，也就是说，你应该在不使用时取消滚动事件的绑定，并且理想情况下限制滚动事件每秒发生的次数，除非你做一些非常简单的事情，否则最好使用插件，例如jQuery Waypoints

Answer 3

CSS (Point 1):

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;
    color:white;text-align:center;line-height:8em;font-size:1.2em;  
    display: none;
}

Javascript (Point 2):

$(document).ready(function() {
        var headerTop = $('body').offset().top;
        var headerBottom = headerTop + 200; 
        $(window).scroll(function () {
            var scrollTop = $(window).scrollTop(); 
            if (scrollTop > headerBottom) {
                if (($("#menu").is(":visible") === false)) {
                    $('#menu').fadeIn('slow');
                }
            } else {
                if ($("#menu").is(":visible")) {
                    $('#menu').fadeOut('fast');
                }
            }
        });
    });

已经测试。享受吧!

Answer 4

我想这就是你想要的:

var startAfter = 200,
menuIsVisible = false;
$(window).scroll(function() {
if($(document).scrollTop() > startAfter && !menuIsVisible) {
    $("#menu").fadeIn(1000, function(){
        menuIsVisible = true;
    });
}
else if ($(document).scrollTop() <= startAfter && menuIsVisible) {
    $("#menu").fadeOut(1000, function(){
        menuIsVisible = false;
    });
}

});

查看这个演示