javascript - 访问具有哈希值的页面时导航栏不固定，例如 (example.com#footer)

Question

我使用 jQuery 将导航栏从静态更改为固定，方法是在滚动后将 .navbar-fixed-top 添加到导航栏元素，效果很好。

但是当使用 URL HASH 访问页面的一部分时，.navbar-fixed-top 不会添加到导航栏。

例如，当您访问没有散列的页面时它工作正常: https://codepen.io/ExillustX/pen/jmQpyo

with hash 导航栏不固定:https://codepen.io/ExillustX/pen/jmQpyo#footer

所以我的问题是，当使用哈希 url 访问页面时，如何固定导航栏？

感谢任何帮助。

我的代码:

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 550) {
      //                        $("#navbar").addClass("navbar-fixed-top");
      $("#navbar").addClass("navbar-fixed-top");

    } else {
      $("#navbar").removeClass("navbar-fixed-top");
      //                       

    }
  })
})

#home,
#content,
#footer {
  height: 500px;
  width: 50%;
  margin-top: 10px;
}

#home {
  background-color: #ff3366;
}

#content {
  background-color: #78519a;
}

#footer {
  background-color: #c80032;
}

.navbar-brand h2 {
  color: white;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar" class="navbar navbar-default navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <h4>nav ;/</h4>
      </a>
    </div>
  </div>
</nav>
<div id="home">
</div>
<h4>Navbar toggle</h4>
<div id="content">

</div>
<div id="footer">

</div>

Answer 1

在就绪函数结束之前添加:

$(window).trigger("scroll");