Bootstrap 词缀在窗口调整大小时消失答案

【问题标题】：Bootstrap affix dissapearing on window resizeBootstrap 词缀在窗口调整大小时消失
【发布时间】：2017-06-28 19:15:46
【问题描述】：

我知道有人问过类似的帖子，但似乎没有人解决我的页面设置方式的问题。一个快速的纲要。因此，我在页面顶部有一个导航栏，在用户滚动经过高度为 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 并不太熟悉，因此我们将不胜感激任何详细的帮助。

【问题讨论】：

很抱歉缺少有关页面设置的详细信息。这是我使用pascalvangemert.nl 的想法的一个示例，唯一真正的区别是我的导航栏沿着页面顶部运行，而不是在侧面

标签： jquery html css twitter-bootstrap affix

【解决方案1】：

天啊，我觉得自己很愚蠢。可能是可以想象的最简单的解决方法。对于我在本示例中使用的 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
     }
   });
 });

【讨论】：