0

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

1 に答える 1

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;
    });
});
于 2013-09-30T22:09:16.703 に答える