Аффикс Bootstrap исчезает при изменении размера окна

Я знаю, что подобные сообщения были заданы, но ни один из них, похоже, не решил проблему с тем, как моя страница настроена. Краткое изложение. Итак, у меня есть навигационная панель в верхней части страницы, которая прикрепляется после того, как пользователь прокручивает изображение высотой 100vh (ака, изначально оно заполняет всю верхнюю часть страницы). Итак, я нашел этот скрипт jQuery, который динамически регулирует верхнее смещение на основе начальной высоты этого изображения при загрузке страницы.

JQuery

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
   $(this).affix({
     offset: {
     top: $(this).offset().top,
     }
  })
})
$(window).on("resize", function(){
   $attribute.each(function(){
      $(this).data('bs.affix').options.offset = $(this).offset().top
   })
});

Так что все в порядке, аффикс работает, когда пользователь открывает страницу, загружается содержимое и начинается прокрутка. Однако, когда я тестировал что-то еще немного или на мобильных устройствах, я заметил, что когда размер страницы изменяется каким-либо образом после начальной загрузки, панель навигации возвращается к «аффиксу-верху», только иногда сбрасываясь в состояние «аффикс» (обычно после прокручивая вверх раздел страницы, в котором произошло изменение размера). То же самое происходит на рабочем столе при изменении размера страницы.

CSS

.affix {
   top: 0;
   width: 100%;
   z-index: 250;
}
.affix-top {
   position: absolute;
   width: 100%;
}
.affix + .container-fluid {
   padding-top: 70px;
}

HTML

 <nav id="topNav" class="navbar navbar-inverse navbar-static-top" data-spy="affix" data-smart-affix data-offset-top=""><!--TOP AFFIX NAVBAR | START-->
    <div class="container">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span> 
                </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li data-toggle="tooltip" data-placement="bottom" title="Back to the Top!"><a href="#top" class="ripplelink"><span class="glyphicon glyphicon-chevron-up"></span></a></li>
                <li><a href="#profile" class="ripplelink">My Profile</a></li>
                <li><a href="#skills" class="ripplelink">Skills</a></li>
                <li><a href="#" class="dropdown-toggle ripplelink text-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Experiences&nbsp;&nbsp;<span class="caret"></span></a>
                    <ul class="dropdown-menu inverse-dropdown">
                        <li><a href="#experience">Education</a></li>
                        <li><a href="#work">Work Experience</a></li>
                        <li><a href="#humanitarian">Humanitarian Work</a></li>
                    </ul>
                </li>
                <li><a href="#activities" class="ripplelink">Interests</a></li>
                <li><a href="#gallery" class="ripplelink">Gallery</a></li>
                <li><a href="#feedback" class="ripplelink">Feedback</a></li>
                <li><a href="#contact" class="ripplelink">Contact Me</a></li>
            </ul>
        </div>
    </div>
</nav><!--TOP AFFIX NAVBAR | END-->

Итак, мне интересно, как я могу сделать так, чтобы панель навигации оставалась в состоянии «прикрепления» даже после изменения размера окна после начальной загрузки? Я не слишком хорошо знаком с jQuery, поэтому любая подробная помощь здесь будет очень признательна.


html jquery css twitter-bootstrap affix
person Nic H    schedule 28.06.2017    source источник
comment
Извините за отсутствие подробностей о настройке страницы. Вот пример идеи, что я использую pascalvangemert.nl, единственная реальная разница в том, что моя панель навигации работает вверху страницы, а не сбоку   -  person Nic H    schedule 28.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Боже, я чувствую себя глупо. Вероятно, это было самое простое исправление, которое только можно себе представить. Для всех, у кого могут возникнуть проблемы с кодом c/p'ed, который я использовал для этого примера. Измените его на это:

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
   $(this).affix({
     offset: {
     top: $(this).offset().top,
   }
 });
});
$(window).on("resize", function(){
   $attribute.each(function(){
     if(this.height < 100 + "vh") {
       $(this).data('bs.affix').options.offset = $(this).offset().top
     }
   });
 });
person Nic H    schedule 28.06.2017