Question

就像在Pinterest应用程序中一样，当我向下/向上滚动时，我希望我的顶部导航栏向上/向下滑动同时我的底部工具栏向下滑动/向上滑动。

现在，我已设法使用下面的代码向上/向下滚动时隐藏和显示我的顶部导航栏。我正在试图弄清楚如何与我的底部工具栏同时做相反的事情，但我无法让它工作！

我对此很新，所以任何建议都会非常感激！

jquery的：

$(document).ready(function(){

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } 
    previousScroll = currentScroll;
}); });

Answer 1

基于您在jsfiddle中提供的结构：

- HTML

<div id="header-wrap">
    <div id="header" class="clear">
        <nav><h1>Header</h1>another line<br/>another line
        </nav>
    </div>
</div>
<div id="footer-wrap">
    <div id="footer" class="clear">
        <nav><h1>Footer</h1>another line<br/>another line
        </nav>
    </div>
</div>

- CSS：

body {
    height: 1000px;
}

#header, #footer {
    width: 100%;
    height: 120px;
    /*position: absolute;*/
    background-color: #e0e0e0;
}

#header {
    top: -20px;
    position: relative;
}

#header-wrap, #footer-wrap {
    width: 100%;
    position: fixed;
    padding: 0px;
    /*background-color: #e0e0e0;*/
}

#header-wrap {
    top: 0px; 
}

#footer-wrap {
    bottom: 0px; 
}

- JS

$(function() {
    var previousScroll = 0,
        headerOrgOffset = $('#header').height();

    //$('#header-wrap').height($('#header').height());

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header').slideUp("slow");
                $('#footer').slideDown("slow");
            } else {
                $('#header').slideDown("slow");
                $('#footer').slideUp("slow");
            }
        } 
        previousScroll = currentScroll;
    });
});

向上/向下滚动时向上/向下滑动导航栏和底部工具栏（如Pinterest应用程序）

1 个答案: