Question

我使用这个漂亮的小JavaScript来使我的导航栏（通常从顶部向下坐230px）一旦页面向下滚动230 px就会粘到页面顶部。然后它给出＆＃34; nav＆＃34;元素a＆＃34;固定＆＃34;位置。

＆＃13;

$(document).ready(function() {
  $(window).bind('scroll', function() {

    if ($(window).scrollTop() > 230) {
      $('nav').addClass('fixed');
    } else {
      $('nav').removeClass('fixed');
    }
  });
});

＆＃13;

nav {
  width: 90%;
  display: flex;
  justify-content: center;
  max-width: 1400px;
  height: 85px;
  background-color: rgba(249, 241, 228, 1);
  margin: auto;
  border-top-left-radius: 0em;
  border-top-right-radius: 0em;
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
}

.fixed {
  position: fixed;
  border-top: 0;
  top: 0;
  margin: auto;
  left: 0;
  right: 0;
  z-index: 4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

  <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
  </ul>

</nav>

＆＃13;

现在，问题是：我已经定位了相应的锚点目标在页面内并给了他们一些＆＃34; padding-top＆＃34;占用固定的导航栏（大约90px），以便在点击后页面跳转到它们后，它们不会消失在栏后面。

    .anchor {
        padding-top: 90px;
        }

<a class="anchor" id="three">

这很好用，因为导航栏已经固定在顶部。但是如果你在导航栏仍然处于其原始页面中间位置时点击一个链接（例如用户将会进行的第一次点击），它只会忽略我给锚定目标的偏移并跳转到锚定目标的奇怪位置隐藏在导航栏后面（甚至没有与页面顶部对齐）！

如果我然后再次单击该链接（现在位于页面顶部的固定栏中），它会自行更正并显示我想要的页面。但第一次点击总是错过 - 我无法弄清楚原因！请帮忙

编辑：在这里工作演示：http://www.myway.de/husow/problem/problem.html

Answer 1

1st使用spacebody

为您的第一个div添加新的班级名称class="space"

<nav>
...
</nav>

<div class="space spacebody">
</div>

第二个JS使用以下应该解决你的问题：

   $(document).ready(function() {
     $(window).bind('scroll', function() {

       if ($(window).scrollTop() > 230) {
         $('nav').addClass('fixed');
         $('.spacebody').css('margin-top', '85px');
       } else {
         $('nav').removeClass('fixed');
         $('.spacebody').css('margin-top', '0px');
       }
     });
   });

原因为什么？

因为当导航没有固定时，它的高度为85px，向下滚动时没有高度为0高度。然后，下面的所有内容都会向上移动85px，导致您的目标低于ONE或TWO等目标。这不是您错过了第一次点击，而是导航未修复且点击您将向下滚动85px。如果您滚动到顶部并单击，您将再次错过。

如果您使用nav

更改background-color: transparent;的CSS，则可以轻松看到此信息

使用上面的代码时，应该修复它，当导航变为固定时，将margin-top添加到下方的div为85px，这样它们就会保持与你点击的高度相同。

页内锚点与＆＃34;滚动然后修复＆＃34;无法正常工作JS导航栏代码

1 个答案: