1

基本的に、セクション別にソートされた1ページのWebサイトで、ナビゲーションとして機能する順序付けられていないリストがあります。これらのセクションまたはパネルは、ブラウザウィンドウの全幅と高さです。

最初のパネルでは、このリストは垂直ですが、ユーザーがページを下にスクロールしてセクション2（つまり、ブラウザーウィンドウの上部から2番目のパネル）に移動すると、上部に固定されるようにスタイルを変更したいと思います。ブラウザウィンドウの垂直方向のナビゲーションではなく、水平方向のナビゲーションになります。可能であればリストを複製したくありません。

私はjQueryが得意ではなく、どこから始めればよいのかよくわかりません。どんな助けでも素晴らしいでしょう。

これは、ブラウザウィンドウの幅と高さを取得し、フルスクリーンのdivを表示する現在のコードです。

function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};
4

2 に答える 2

2

非常に簡単な例を次に示します。

デモ

html :

<ul id="nav">
<li><a href="#" id="linkOne">One</a></li>
<li><a href="#" id="linkTwo">Two</a></li>
<li><a href="#" id="linkThree">Three</a></li>
</ul>

<div id="divOne" class="panel">    
</div>
<div id="divTwo" class="panel">    
</div>
<div id="divThree" class="panel">    
</div>

css :

#nav {
 position:fixed;
 top:0;
 left:10px;     
}

#nav.horizontal li {
  float:left;
}

#divOne {
 background-color:#cef;   
}
#divTwo{
 background-color:#efc;   
}
#divThree{
 background-color:#fce;   
}

js /jQuery :

$("div.panel").css({
    height: $(window).height(),
    width: $(window).width()
});

$(window).scroll(function() {
    ($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal");
});

$("#linkOne").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divOne").offset().top
    });
    $("#nav").removeClass("horizontal");
    e.preventDefault();
});

$("#linkTwo").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divTwo").offset().top
    });
    $("#nav").addClass("horizontal");
    e.preventDefault();
});

$("#linkThree").click(function(e){
   $('html, body').animate({
        scrollTop: $("#divThree").offset().top
    });
    $("#nav").addClass("horizontal");
    e.preventDefault();
});

</p>

于 2012-07-30T16:57:26.483 に答える
1

わかりました、あなたのことを正しく理解していれば (私のコメントで説明を参照してください)、あなたの目標は、サイトの訪問者がページを下にスクロールしたときでも、ナビゲーション ペインが確実に見えるようにすることです。ページの特定のポイントに到達した後にナビゲーション バーを水平に表示するように変更しないように注意してください。初心者) 移行をスムーズにします。

私が提案するのは、数日前のこの質問を見てください. 彼が探していた効果のデモを作成しました。これは、あなたが探しているものと非常によく似ており、私の開発サイトでホストしています。見てみて、気に入ったものがあれば、それを実装するのに問題がある場合はお知らせください。喜んでお手伝いさせていただきます。

于 2012-07-30T16:43:25.270 に答える