0

我需要你的帮助。

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

问题：顶部有一个很大的封面页，它使用网络转换并将高度缩小为 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;  

}
4

1 回答 1

0

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

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

更新：

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

于 2012-05-11T15:28:39.013 回答