Question

我知道有类似的帖子被问过，但是我们的网页设置方式似乎没有人能解决这个问题。快速破解。所以我在页面顶部有一个导航栏，当用户滚动到高度为100vh的图像（Aka，它最初填满整个页面顶部）后，它会被粘贴。所以我发现这个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
   })
});

所以很好，当用户打开页面，加载内容并开始滚动时，词缀就可以了。在测试更多或移动设备时，我注意到在初始加载后以任何方式调整页面大小时，导航栏将返回到“附加顶部”，仅在某些时候重置为＆＃ 39;贴上＆＃39;状态（通常在向上滚动超过发生调整大小的页面部分之后）。调整页面大小时，桌面上会发生同样的事情。

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-->

所以我想知道，我怎么能这样做，以便导航栏留在＆＃39;词缀＆＃39;即使在初始加载后重新调整窗口大小后状态？我并不是很熟悉使用jQuery，所以在这里任何详细的帮助将不胜感激。

Answer 1

上帝，我感到愚蠢。可能是最容易想象的修复。对于其他任何可能与我在本例中使用的c / p代码有这种问题的人。将其更改为：

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
     }
   });
 });

在窗口调整大小

1 个答案: