Question

我需要你的帮助。

我创建了一个链接到同一页面上的锚点位置的导航栏，允许视图端口在单击时向下滚动（没有任何复杂的内容）。

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

有没有人有解决方案？也许Jquery检测scrollTop（）并使用if语句调整/ offset（）位置??

这里是链接：[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

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

1 个答案: