Сдвигайте вверх / вниз как панель навигации, так и нижнюю панель инструментов при прокрутке вверх / вниз (как приложение Pinterest)

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;
}); });
Теги:

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;
    });
});
Поделиться
  • 0
    Спасибо за ответ, однако с нижним колонтитулом ничего не происходит при прокрутке вниз, а при прокрутке вверх он полностью поднимается вместе с заголовком. мою HTML-структуру можно найти здесь: ссылка
  • 0
    проверьте это jsfiddle.net/dXQbk/8
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню