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

时间:2015-09-11 04:18:17

标签: jquery css scroll css-transitions

这实际上是两个问题:

  1. 为什么1s从display:none;过渡到display:block;无效?
  2. 如何才能使此滚动功能仅在scrolling 200px之后从顶部开始,即滚动过“红框”之后?
  3. 非常感谢任何帮助,非常感谢!

    $(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>

3 个答案:

答案 0 :(得分:2)

1)您可以使用jQuery fadeInfadeOut

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/

答案 1 :(得分:0)

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

已经过测试。享受!

答案 2 :(得分:0)

我认为这就是你想要的:

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