бутстраповских нав наклеить ж/анимацию (slidedown/slideup)

Question

Глядя создать навигацию, которая ведет себя как нав на http://www.invisionapp.com/

Следующий код вызывает у меня сч скользить вниз после пересечения data-offset-top положения (при прокрутке страницы вниз), но я не могу понять, как сдвинуть навигацию обратно при пересечении позиции data-offset-top (при прокрутке страницы).

$('#navigation').on('affixed.bs.affix',function(){ 
    $(this).height('75'); 
    $(this).slideDown(200); 
}); 

ли кто-нибудь есть рабочая скрипку для нав, который работает как http://www.invisionapp.com/? Благодаря!

Answer 1

Я попытался добиться того же, что вам нужно, с помощью Bootstrap 3 affix, но без успеха. Таким образом, вместо того, чтобы играть с ассемблером Bootstrap, было легче создать пользовательскую липкую навигацию.

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

HTML часть

Добавление любого содержимого в DIV, у меня есть логотип и основная навигация в там.

<div id="menu-bar"></div> 

CSS часть

Я использую CSS3 переходы, как они well supported (кроме IE < = 9) и их анимации устраивает желаемый эффект больше всего, намного лучше, чем JQuery анимации(). Эффект jQuery animate() замедляется, когда я продолжаю прокручивать после достижения смещения, чтобы начать анимацию. С CSS3 нет необходимости останавливать прокрутку, чтобы анимация была безнадежной, и ее эффект по-прежнему остается незамеченным.

#menu-bar { 
    position: fixed; 
    top: -200px; 
    width: 100%; 
    transition: top 0.5s ease 0s; 
    -webkit-transition: top 0.5s ease 0s; 
    -moz-transition: top 0.5s ease 0s; 
    -o-transition: top 0.5s ease 0s; 
} 

JavaScript часть

Я использую JQuery, может быть, вы могли бы обойтись без него, но это было бы гораздо более сложным, чем это решение. В любом случае вы используете jQuery для Bootstrap.

var $document = $(document), 
    $element = $('#menu-bar'); 

$document.scroll(function() { 
    if ($document.scrollTop() >= 850) { 
     $element.stop().css({ 
      top: '0px' 
     }); 
    } else { 
     $element.stop().css({ 
      top: '-200px' 
     }); 
    } 
}); 

JSFiddle чтобы увидеть его в действии! Я добавил несколько стилей, поэтому липкий элемент можно легко увидеть.