Question

我正在使用bootstraps affix top来滚动350px后让我的导航变得粘滞，并使我的导航从顶部定位350px，data-offset-top =“350”。问题是当我移动时我根本不想要偏移顶部。我一直在尝试注入并使用jquery将其删除，但我的网站似乎没有响应jquery。

有没有人有任何建议或者可以指出我的代码中的缺陷？

Jquery的

$(window).resize(function() {
  if ($(this).width() < 728) {
    $("#main-nav").removeAttr("data-offset-top","350");
  } else {
    $("#main-nav").attr("data-offset-top","350");
  }
});

HTML

<header class="jumbotron">
<div class="container-fluid">

<div class="row">
  <div class="col-sm-8 col-sm-offset-2">
    <div class="container-fluid ad-container">
      <h1 class="text-center">Color Fun Run!</h1>
      <button class="btn btn-lg btn-primary center-block">Register Now!</button>
    </div>
  </div>
</div>

<div class="row">
   <nav id="main-nav" class="navbar navbar-default" data-spy="affix" data-offset-top="350">
    <div class="container-fluid">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      </div>

      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav">
          <li id="logo" class="hidden-xs site-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a>
          </li>
        </ul>

        <ul class="navigation-padding nav navbar-nav navbar-right">
          <li class="visible-xs"><a href="#eventme">Event Me</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>

      </div>

      </div>
    </nav>
</div>

</div>
</header>

感谢您的帮助。

Answer 1

问题是插件已在此属性上初始化，并且事件挂在元素上。因此，删除该属性没有帮助。尝试通过JavaScript而不是属性来初始化插件。

Answer 2

如何将.affix设置为position：static而不是固定用于较小的设备。

@media (max-width: 768px) {
    .affix {
        position: static;
    }
}

这将使导航变为静态而不是固定的小型设备。不需要Jquery。

工作Plnkr：Plnkr

编辑： （上面的修补程序会让您的导航栏保持静态，以防您仍然想要修复它，删除上面建议的更改并在下面使用）

.affix在达到data-offset-top值时应用固定位置，但navbar-fixed-top已经在移动设备的情况下应用了固定位置，因此不会引起任何问题。只需将navbar-fixed-top类应用于仅适用于移动设备的导航，您应该很高兴。

jquery响应.width似乎不想工作

2 个答案: