Различные проблемы с меню Bootstrap

Я использую Bootstrap 3 для одностраничного сайта, который я создаю. У меня есть несколько проблем, которые я не могу решить.

Ссылка на страницу

Scrollspy:

Первая проблема касается Scrollspy. Я реализовал это, но я хочу отвязать прокрутку при прокрутке вверх за самый верхний якорь. В настоящее время в навигации есть три элемента, самым верхним из которых является «Работа». При прокрутке вверх за пределы этой области на сайте хотелось бы отвязать "подглядывание". Мне пришла в голову идея добавить дополнительный элемент в навигацию (с эквивалентным якорем), а затем расположить его за пределами страницы, но это выглядит немного грязно!

Свернутое меню на мобильных устройствах:

Две другие проблемы, которые у меня есть, связаны со свернутым меню на мобильных устройствах (проверено на iPhone 4).

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

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

$('.nav li a').on('click',function(){
    $('.navbar-collapse').collapse('toggle');
})

Любая помощь приветствуется!


mobile jquery twitter-bootstrap nav scrollspy
person designbydarren    schedule 12.09.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

    $('.nav li a').on('click',function(){
        $('.navbar-collapse').collapse('toggle');
        return false;
    })
person gingin    schedule 12.09.2013

arrow_upward
0
arrow_downward

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

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
    <!-- main-logo -->
    <h1><img src="img/alfie-logo-sml.png" class="img-responsive  jumbotron--logo"/></h1>

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
         <li class="brand-font"><a href="#work">Work</a></li>
         <li class="brand-font"><a href="#team">Team</a></li>
         <li class="brand-font"><a href="#contact">Contact</a></li>
      </ul>

  </div><!-- /navbar-collapse -->

</div>

person gingin    schedule 13.09.2013