2013-09-12 4 views
0

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

Link to the page

Scrollspy:

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

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

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

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

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

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

Любая помощь очень ценится!

ответ

0

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

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

Это не сработало я боюсь @gingin. – designbydarren

0

Я хотел бы начать очень близко к оригинальному шаблону. Код ниже берется из исходного шаблона и немного адаптирован ... так что, по крайней мере, переключатель меню должен работать без каких-либо дополнительных пользовательских 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> 

Смежные вопросы