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

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

Вот мой 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. Вы могли бы сказать, просто измените его, но со старым смещением мой липкий nav прыгнет преждевременно на вершину.

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

Ответы

Ответ 1

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

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

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

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

<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 на некоторое подходящее значение.

Приветствия,

Лео

Ответ 2

Ответа на этот вопрос Bootstrap 3 Fixed Navbar...

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

.navbar
{
   -webkit-backface-visibility: hidden;
}

Ответ 3

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

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

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

Ответ 4

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

.navbar-fixed-top, .navbar-fixed-bottom { position:unset; }