Тиражирование Бутстрэпами главной навигации и subnav

Мне нужно быстро запустить функциональность twitter bootstraps main navigation и sub navigation например http://twitter.github.com/bootstrap/scaffolding.html (при прокрутке subnav становится фиксированным к этой основной навигации)

кто-нибудь реализовал это или есть какие-то туториалы?

5 62
javascript twitter-bootstrap

5 ответов:

вот мой код для реализации этой функции:

$(document).scroll(function(){
    // If has not activated (has no attribute "data-top"
    if (!$('.subnav').attr('data-top')) {
        // If already fixed, then do nothing
        if ($('.subnav').hasClass('subnav-fixed')) return;
        // Remember top position
        var offset = $('.subnav').offset()
        $('.subnav').attr('data-top', offset.top);
    }

    if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
        $('.subnav').addClass('subnav-fixed');
    else
        $('.subnav').removeClass('subnav-fixed');
});
73

по состоянию на 2012-12-04 принятый ответ больше не является лучшим выбором, так как желаемая функциональность была включена в Bootstrap. Пожалуйста, смотрите прикрепить компонент JavaScript который является частью Bootstrap JS

24

отличный ответ от @Oleg,

для таких людей, как я, которые хотят воспроизвести отзывчивое поведение.subnav

вот код css (без цветов, границ и эффектов)

body {  padding-top: 90px; }
@media (max-width: 980px) {
    body {
        padding-top: 0;
    }
}
.subnav {
    width: 100%;
}
@media (max-width: 768px) {
    .subnav {
        position: static;
        top: auto;
        z-index: auto;
        width: auto;
        height: auto;
    }
    .subnav .nav > li {
        float: none;
    }
}
@media (min-width: 980px) {
  .subnav-fixed {
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 1020;
  }
 .subnav-fixed .nav {
    width: 938px;
    margin: 0 auto;
  }
}
@media (min-width: 1210px) {
  .subnav-fixed .nav {
    width: 1168px;
  }
}

Если вы хотите клонировать стиль меню (включая цвета, границы и эффекты)

http://jsfiddle.net/baptme/ydY6W/

12

два ответа выше отлично работают, но я просто подумал, что дам людям знать, что я сделал это в модуль (без зависимости jQuery), доступный по адресу ForbesLindesay / booting-sub-nav. Его можно использовать автономно с тегом скрипта или через https://github.com/component/component/

0

вот еще один код 

$(function(){
  var
    $win = $(window),
    $filter = $('.navbar'),
    $filterSpacer = $('<div />', {
      "class": "filter-drop-spacer",
      "height": $filter.outerHeight()
    });
  $win.scroll(function(){     
    if(!$filter.hasClass('navbar-fixed-top')){
        if($win.scrollTop() > $filter.offset().top){
        $filter.before($filterSpacer);
        $filter.addClass("navbar-fixed-top");
      }
    }else if ($filter.hasClass('navbar-fixed-top')){
      if($win.scrollTop() < $filterSpacer.offset().top){
      $filter.removeClass("navbar-fixed-top");
      $filterSpacer.remove();
    }
    } 
  });
});
0