指向同一页面上的位置的链接不匹配

Question

我需要你的帮助。

我制作了一个导航栏，链接到同一页面上的锚点位置，允许视图端口在单击时向下滚动（没什么复杂的）。

问题：顶部有一个大的封面，它使用网页过渡并缩小高度为 0。导航链接认为有一个大页面挡住了，向下滚动得太远。

有人有解决方案吗？也许 Jquery 可以检测 scrollTop（） 并使用 if 语句来调整/偏移 （） 位置？

这是链接： [www.imbenton.com][1]

法典：

    var $window = $(window);    
    $window.bind('scroll', function(){  
    var pos = $(window).scrollTop();    
        if (pos > 2){
            $('#cover').addClass("alt");
            $('#cover img').addClass("alt");
            $('.logo').addClass("alt");
            $('nav').addClass("still");
            $('.navhead').addClass("still");
        }   
        if (pos < 1){
            $('nav').removeClass("alt");    
            $('#cover').removeClass("alt");
            $('#cover img').removeClass("alt");         
            $('.logo').removeClass("alt");
            $('nav').removeClass("still");
            $('.navhead').removeClass("still");
        }       
}); 

-----------.CSS----------

#cover img{ 
    max-width: 90%; 
    padding: 300px 0 600px 0;
    margin: 0 auto;
  -webkit-transition: all 0.8s ease-out;
     -moz-transition: all 0.8s ease-out;
      -ms-transition: all 0.8s ease-out;
       -o-transition: all 0.8s ease-out;
          transition: all 0.8s ease-out;
}

#cover img.alt{
background: url("dvsup.png") repeat fixed;  
    max-width: 0%;  
    padding: 100px 0;
    margin: 0 auto;
} 
nav {
    position: fixed;
    width: 100%;
    top: 173px;
    padding: 0px 0 5px 0;
    text-align: center;
    height: auto;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    z-index: 999;
}
nav.still{
    position: fixed;
    top: -980px;
    padding-top: 900px;
    background: url("dvsup.png") repeat fixed;  
}

Answer 1

这个页面有点酷，但也是一种糟糕的体验。你能发布一些关于它是如何工作的代码吗？

您始终可以将封面作为叠加层放在顶部，这样应该正确计算高度，或者如果您知道计算错误的高度差异，您可以随时调整滚动 y 位置

更新：

我有一个未经测试的想法，使用 jquery 将填充或边距放在内容的顶部（不是封面）。此空间应等于封面的高度。这可能会纠正计算，您必须对其进行测试。你也可以发布一些html吗？除非链接只是内部链接，否则不要担心html