Закрепленная панель навигации мигает при достижении нижней части страницы

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

Вот мой HTML-код для навигатора:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

А вот и мой JS:

<script>
    $(document).ready(function() {
        $('#nav-wrapper').height($("#nav").height());
        $('#nav').affix({
            offset: 675
        });
    });
</script>

Важно отметить, что это началось только после того, как я изменил смещение в моем JS с offset: $('#nav').position() на offset: 675. Вы можете сказать, ну просто верните его обратно, но со старым смещением моя липкая навигация преждевременно прыгнула бы наверх.

Спасибо за любую помощь, которую вы можете мне предоставить!


javascript html css twitter-bootstrap nav
person Brian    schedule 12.02.2013    source источник
comment
Какой браузер вы используете? Только что протестировал с ff и chrome, но выглядит нормально. Ваш веб-сайт плохо выглядит на моем мониторе с разрешением 1440x900, когда я прокручиваю его вниз.   -  person Morpheus    schedule 12.02.2013
comment
Вы пробовали использовать -webkit-perspective: 1000; -webkit-backface-visibility: hidden;? Источник   -  person    schedule 12.02.2013
comment
@Morpheus Интересно, я тестировал его в FF, Chrome и Safari и имел эффект мерцания во всех 3. Что вы имеете в виду, это не выглядит хорошо в этом разрешении? Мой монитор может иметь ширину не более 1300 пикселей. Я использую Bootstrap, поэтому при просмотре на широких мониторах он ведет себя странно. Есть идеи, как это исправить?   -  person Brian    schedule 12.02.2013
comment
@thekalaban Я тестировал этот код как в тегах body, так и в тегах #nav, но эффект мерцания все еще сохраняется.   -  person Brian    schedule 12.02.2013
comment
@Brian, когда я нажимаю на контакт, он прокручивается вниз, но я вижу около 100 пикселей служебного содержимого. По ширине выглядит нормально.   -  person Morpheus    schedule 12.02.2013
comment
@Morpheus О да, я еще не установил точные точки прокрутки. У меня слишком много встроенных div, поэтому я хочу немного очистить его и сбросить свои ссылки. Моя основная проблема на данный момент - это мерцание, но если вы его не видите, возможно, мне не стоит слишком об этом беспокоиться.   -  person Brian    schedule 12.02.2013
comment
Привет. Если вы хотите использовать другой плагин, проверьте это: sticky-nav Я разочаровался с компонентом Affix Twitter Bootstrap он также продолжает мигать для меня. Вот пример упомянутого плагина: пример   -  person Seed    schedule 13.10.2013

Ответы (4)


arrow_upward
11
arrow_downward

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

Проблема, с которой я столкнулся, заключалась в том, что код аффикса применяет класс (например, affix или affix-bottom) к прикрепленному элементу в зависимости от его вертикального положения на странице. Я назову их «зонами».

Если CSS для нового класса таков, что он перемещает прикрепленный элемент по вертикали, он может мгновенно оказаться в другой зоне, поэтому класс удаляется, поэтому он перемещается назад, поэтому класс применяется и т. д. Таким образом, положение чередуется с каждым onscroll событием и мерцает.

Ключевым моментом для меня было убедиться, что значения data-offset-top / data-offset-bottom и классы CSS и были установлены так, чтобы элемент больше не перемещался по вертикали при переключении аффикса. I.E. Что-то типа:

<div class="someClass" data-spy="affix" data-offset-top="20" data-offset-bottom="300">
  ...
</div>

(data-offset-bottom - это повторно прикрепить элемент, чтобы он не врезался, например, в высокий нижний колонтитул, и это не всегда будет необходимо.) А затем:

.someClass.affix {
  /* position: fixed; already applied in .affix */
  top: 10px;
  /* might also need e.g. width: 300px; as position: fixed; removes the element from its parent. */
}
.someClass.affix-bottom {
  position: absolute; /* Start scrolling again. */
  top: auto; /* Override the top position above. */
  bottom: 20px; /* It should stop near the bottom of its parent. */
}

Иногда скачок при изменении классов CSS толкает элемент дальше в зону, в которую он входит, что приводит к одиночному щелчку границы, но не к повторному мерцанию.

N.B. Я думаю, что очень небольшой скачок, когда ваше меню становится фиксированным, можно было бы сгладить таким образом, сделав очень небольшую корректировку вертикального положения элемента, когда он прикреплен, и / или установив data-offset-top на некоторое подходящее значение.

Ваше здоровье,

Лео

person Leo    schedule 14.05.2013

arrow_upward
8
arrow_downward

Ответ из этого Bootstrap 3 Fixed Верхняя панель навигации ...

Просто добавьте следующее в .navbar

.navbar
{
   -webkit-backface-visibility: hidden;
}
person ken    schedule 12.06.2014
comment
Благодаря тонну! Судя по всему, Bootstrap 3.x содержит этот глюк webkit. Я рад, что решение - это простой "взлом" css. Я удивлен, что это еще не исправлено. - person Jim22150; 11.07.2014
comment
да, я жду таких функций, как хорошо цвет, вертикальное пространство и т. д., все еще нужно немного взломать, чтобы сделать его из приятного - ›приятнее :) - person ken; 11.07.2014
comment
Примите этот ответ, как будто он полезен для вас, @Brian - person Steffi Keran Rani J; 27.06.2018

arrow_upward
2
arrow_downward

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

$ ->
  $('.content').css('min-height', ->
    $('.bs-docs-sidebar').height())

И все работало как шарм.

person Kadu Diógenes    schedule 19.08.2013

arrow_upward
1
arrow_downward

Просто добавьте это в свой класс CSS.

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }
person Rajon Tanducar    schedule 07.12.2016