页面定位符与“滚动然后修复”JS导航栏代码

Question

组合不正常工作我使用这个漂亮的小JavaScript来使我的导航栏（通常坐在顶部230px下）粘到顶部一旦页面向下滚动即230页。然后它给“nav”元素一个“固定”的位置。

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

 
    if ($(window).scrollTop() > 230) { 
 
     $('nav').addClass('fixed'); 
 
    } else { 
 
     $('nav').removeClass('fixed'); 
 
    } 
 
    }); 
 
});

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

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

现在的问题：我已经放置在相应的锚目标页面内 ，并给予他们一些“填充顶”占固定导航栏（约90像素），这样当点击后页面跳到它们后面时，它们不会消失在栏后面。

.anchor { 
     padding-top: 90px; 
     } 

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

这工作正常，因为导航栏已经固定在顶部。 但是，如果您在导航栏仍处于其原始页面中间位置（例如，用户首次点击该页面）时点击链接，它会忽略我给出锚点目标的偏移量并跳转到锚点的奇怪位置目标隐藏在导航栏后面（甚至不与页面的顶部对齐）！

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

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

Answer 1

1日添加新的班级名称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 CSS与background-color: transparent;

随着代码的时候，你的资产净值成为固定为85px加边距到div下面让他们保留以上应该修复它您点击的高度相同。