javascript - 向上滚动时使用 animate() 并显示 div

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 方法。检查一下，如果元素显示在这里也很好，但我想你可以弄清楚 ;-)