Question

我的网站上有两个导航栏。两个导航栏都是固定的。基本上当我向上滚动时，我想使用animate（）并在页面中显示两个导航栏。如何获取向上滚动事件并使用它来设置div的动画，例如Google搜索小部件。我将衷心感谢您的帮助。谢谢。

HTML：

    <div id="navbar_header">
        <a href="#">some link</a>
    </div>
    <div id="main_content">
        <p>Some content...</p>
    </div>
    <div id="navbar_footer">
        <a href="#">some link</a>
    </div>

的CSS：

#navbar_header {
    background: #22313F;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

#navbar_footer {
    background: #22313F;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
}

Answer 1

通常使用滚动事件的窗口应该足够了，因为它足够大并且滚动了一个元素。如果正确加载了jQuery，你可以尝试这样的事情：

$(document).ready(function(){
    var lastTopPosition = 0;
    $(window).scroll(function(){
        var topPosition = $(window).scrollTop();
        if (topPosition > lastTopPosition ){
            $("#navbar_header").stop(true).animate({'top':'-40px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'-40px'}, 200);
        } else {
            $("#navbar_header").stop(true).animate({'top':'0px'}, 200);
            $("#navbar_footer").stop(true).animate({'bottom':'0px'}, 200);
        }
        lastTopPosition = topPosition;
    }
});

这段代码每次滚动时都会从顶部获取当前位置。如果距离变大（向下滚动），则两个条形淡出。如果它变小（向上滚动），它就会淡入。你可以在这里用你的animate（）调用替换FadeOut / In方法。检查，如果元素显示在这里也会很好，但我想你可以想出那个; - ）

Answer 2

如果我理解这一点，那就是：

$("#main_content").scroll(function(){
     $('#navbar_header').show(300); 
     $('#navbar_footer').show(300); 
});

show（300）将基本上显示你的div的动画300ms。

在向上滚动时使用animate（）并显示div

2 个答案: