Как скрыть/показать панель навигации, когда пользователь прокручивает вверх/вниз

Скрыть/показать панель навигации, когда пользователь прокручивает вверх/вниз

Вот пример, который я пытаюсь достичь: http://haraldurthorleifsson.com/ или http://www.teehanlax.com/story/readability/

Навигационная панель сдвигается с экрана, когда вы прокручиваете вниз и покачиваетесь на экране при прокрутке вверх. Я выяснил, как это сделать с постепенным исчезновением/уменьшением яркости, но я хотел бы достичь его с той же анимацией, что и в примере. Примечание. Я уже пробовал SlideIn() и так же, как и анимацию растяжения...

Jquery:

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

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

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').fadeOut();
        } else {
            $('#header').fadeIn();
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});

CSS

#header {
    width: 100%;
    z-index: 100;
}

.fixed {
    position: fixed;
    top: 0;
}

#header-wrap {
    position: relative;
}

HTML:

    <div id="header-wrap">
    <div id="header" class="clear">
        <nav>
            <h1>Prototype</h1>
        </nav>
    </div>
</div>

Ответы

Ответ 1

Чтобы внутреннее содержимое навигатора скользило вверх, а не постепенно скрывалось, вам нужно сделать анимацию на родительском элементе и сохранить внутренний элемент в нижней части родителя, например:

jsfiddle

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

CSS

body {
    height: 1000px;
}

#header {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#header-wrap {
    width: 100%;
    position: fixed;
    background-color: #e0e0e0;
}

JS

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();
        }
    } else {
            $('#header-wrap').slideDown();
    }
    previousScroll = currentScroll;
});

Ответ 2

Вы пробовали анимировать? но замените -60px на высоту навигационной панели. Но отрицательный.

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').animate({
                 top: '-60px'      //Change to Height of navbar
            }, 250);               //Mess with animate time
        } else {
            $('#header').animate({
                 top: '0px'
            },250);
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});

Ответ 3

Какой бы элемент navbar вы не использовали, он должен включать в него transition: transform 0.3s и базу transform от 0.

#navbar {
    position: fixed;
    right: 0; left: 0; top: 0; 
    /* your height */
    height: 40px;
    /* .... */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
}
#navbar.scrolled {
    /* subtract your height */
    -webkit-transform: translate3d(0,-40px,0);
    -moz-transform: translate3d(0,-40px,0);
    transform: translate3d(0,-40px,0);
}

Затем вашему javascript нужно следить за прокруткой пользователя:

;(function (){
    var previousScroll = 0;
    var navbar = document.getElementById('navbar'),
        navClasses = navbar.classList; // classList doesn't work <IE10

    window.addEventListener('scroll', function(e){
       var currentScroll = window.scrollY;
       var isDown = currentScroll > previousScroll;

       if ( isDown && !navClasses.contains('scrolled') ){
          // scrolling down, didn't add class yet
          navClasses.add('scrolled'); // we hide the navbar
       } else if ( !isDown ){
          // scrolling up
          navClasses.remove('scrolled'); // won't error if no class found
       }

       // always update position
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

Ответ 4

Попробуйте использовать js.

Также вы можете отредактировать классы CSS и развернуть эффект перехода.

http://wicky.nillia.ms/headroom.js