Scroll 固定的滚动导航

我想将我的导航和子导航包装在一个div中，一旦用户滚动过顶部，这个div就会变得固定。我正在使用(u)的起始主题。我的主题叫测试

这是我的导航代码和包装（我没有子导航，因为我想先弄清楚）：

下面是我的function.php：

function test_fixed_navigation() {
wp_enqueue_script( 'fixed-navigation', get_template_directory_uri() . '/js/fixed- navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'test_fixed_navigation' );

这是我的固定导航文件：

( function() {
$(document).ready(function() {
$(window).scroll(function () {
  //if you hard code, then use console
  //.log to determine when you want the 
  //nav bar to stick.  
  console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) {
  $('#fixed-nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
  $('#fixed-nav').removeClass('navbar-fixed');
}
});
});

（函数（）{
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
//如果您需要硬编码，请使用控制台
//.log以确定何时需要
//导航条要粘贴。
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>280）{
$（'fixed nav'）.addClass（'navbar-fixed'）；
}
if（$（窗口）.scrollTop（）<281）{
$（'fixed nav'）.removeClass（'navbar-fixed'）；
}
});
});

如果有人能指出我做错了什么。它只是一直滚动，没有得到修复

编辑：我正在使用这个：

---

所以我不能100%肯定我理解你想要什么，或者什么对你不起作用。但是如果你想让

导航条在向下滚动时保持在顶部，你就可以工作了

您是否希望导航栏从顶部开始

下面是一个例子，我更改了html，使其更清楚地显示发生了什么

<div id="banner">
 <h2>put what you want here</h2>
 <p>just adjust javascript size to match this window</p>
</div>

<nav id='nav_bar'>
<ul class='nav_links'>
  <li><a href="url">Nav Bar</a></li>
  <li><a href="url">Sign In</a></li>
  <li><a href="url">Blog</a></li>
  <li><a href="url">About</a></li>
</ul>
</nav>
<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here  </p>
  <br>
  <br>
  <br>
  <br>
  <p>more stuff</p>
  <br>
  <br>
  <br>
  <br>
  <p>and more..</p>
</div>


把你想要的放在这里
只需调整javascript大小以匹配此窗口







以及更多内容继续在此处滚动








更多的东西









还有更多


所以我不能100%肯定我理解你想要什么，或者什么对你不起作用。但是如果你想让
导航条在向下滚动时保持在顶部，你就可以工作了

您是否希望导航栏从顶部开始

下面是一个例子，我更改了html，使其更清楚地显示发生了什么

<div id="banner">
 <h2>put what you want here</h2>
 <p>just adjust javascript size to match this window</p>
</div>

<nav id='nav_bar'>
<ul class='nav_links'>
  <li><a href="url">Nav Bar</a></li>
  <li><a href="url">Sign In</a></li>
  <li><a href="url">Blog</a></li>
  <li><a href="url">About</a></li>
</ul>
</nav>
<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here  </p>
  <br>
  <br>
  <br>
  <br>
  <p>more stuff</p>
  <br>
  <br>
  <br>
  <br>
  <p>and more..</p>
</div>


把你想要的放在这里
只需调整javascript大小以匹配此窗口







以及更多内容继续在此处滚动








更多的东西









还有更多


对我来说，向下滚动时导航栏固定在页面顶部。你看不到它吗？对我来说，向下滚动时导航栏固定在页面顶部。你看不到它吗？@AUTUMNKNKNUDSON如果回答了你的问题，请将此答案标记为已接受，否则请给出未解决问题的反馈。Thanks@AutumnKnudson如果回答了您的问题，请将此答案标记为已接受，否则请就未解决的问题提供反馈。谢谢
<div id="banner">
 <h2>put what you want here</h2>
 <p>just adjust javascript size to match this window</p>
</div>

<nav id='nav_bar'>
<ul class='nav_links'>
  <li><a href="url">Nav Bar</a></li>
  <li><a href="url">Sign In</a></li>
  <li><a href="url">Blog</a></li>
  <li><a href="url">About</a></li>
</ul>
</nav>
<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here  </p>
  <br>
  <br>
  <br>
  <br>
  <p>more stuff</p>
  <br>
  <br>
  <br>
  <br>
  <p>and more..</p>
</div>