Question

这实际上是两个问题：

为什么1s从display:none;过渡到display:block;无效？
如何才能使此滚动功能仅在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

CSS（第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（第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 3

我认为这就是你想要的：

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;
    });
}

}）;

Check this demo

jQuery滚动函数从特定高度开始

3 个答案: