Аффикс Bootstrap и смещение текста + логотипа

Я новичок в использовании бутстрапа, и меня очень интересует панель навигации аффиксов. (Тот, который остался внизу, а затем поднялся наверх при прокрутке).

Тем не менее, я попробую, но не могу скопировать эффект этого веб-сайта: http://www.blastprocessor.co.uk/

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

Вы знаете, как я мог сделать это

Большое спасибо за твою помощь.


affix
person maltroc    schedule 14.03.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

аффикс bootstrap предназначен для любого элемента в вашем html, вам нужно только добавить boostrap.js в ваш каталог js и настроить верхнюю и/или нижнюю часть, вам нужно изменить этот элемент, у меня есть пример, у вас есть заголовок навигации

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav">

в вашем файле js вам нужна эта строка, например

$('#affix-nav').affix({
offset: {
  top: 100
}})

хорошо, аффикс работает в вашем html, но навигация не меняется на фиксированную позицию, вам нужно добавить css для нового класса, добавленного с аффиксом

nav.affix{
width: 100%!important;
top: 0;}

и теперь вы можете увидеть панель навигации аффикса в своем веб-сайте, вы также можете попробовать с этой навигацией

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav" data-spy="affix" data-offset-top="125">

и вам не нужен файл js для аффикса

чтобы поиграть с элементами навигации, проверьте мой следующий пример

$(window).scroll(function(){
       var height = $(this).scrollTop();
       var brand = $(".navbar-brand");
       if (height > 125){
         brand.show('slow');   
       }
       else{
          brand.hide();
       }
    });
person Siddharta Naranjo    schedule 31.07.2014