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

Question

这其实是两个问题：

为什么从 display:none; 到 display:block; 的 1s 转换不起作用？
我怎样才能让这个滚动功能只发生在从顶部开始 scrolling 200px 之后，即滚动经过 "red box" 之后？

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

$(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 的回答。无法为 'display' 属性设置动画，因为它需要是一个数值并且它不由浏览器呈现，当使用不透明度设置动画时通常更好用可见性：hidden/visible 但这可能意味着您需要切换元素的 z-index 以便隐藏元素不可点击

2 的答案。

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

});

注意：使用滚动事件时，您可能会遇到各种性能问题，即您应该在不使用滚动事件时解除绑定，理想情况下限制滚动事件每秒发生的次数，除非您这样做一些非常简单的东西，使用插件可能更好，即 jQuery Waypoints

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

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

});

Check this demo

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

jQuery scroll function to start at specific height

css

jquery

scroll

css-transitions