0

あなたの助けが必要です。

同じページのアンカーの場所にリンクするナビゲーション バーを作成し、クリックするとビュー ポートが下にスクロールできるようにしました (複雑なことは何もありません)。

問題: Web トランジションを使用し、高さ 0 の縮小を使用する上部に大きなカバー ページがあります。ナビゲーション リンクは、途中に大きなページがあると判断し、下にスクロールしすぎます。

誰かが解決策を持っていますか?? scrollTop() を検出し、if ステートメントを使用して位置を調整/オフセットする Jquery でしょうか??

リンクはこちら: [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 に答える