3

私のウェブサイトのメニューに興味深い動作を実装する必要があります。

メインページのメニュー div では、ウィンドウの下部に固定する必要があり、ユーザーが下にスクロールすると、メニューが上に移動し、ウィンドウの上部に固定されたままになります。ユーザーがスクロールして上に戻ると、メニューが下に移動し、下に固定されたままになります。

残念ながら、私はそうする方法がわかりません。

誰でも私を助けることができますか？

4

2 に答える 2

3

デモ: http://jsfiddle.net/M3KLB/1/

HTML

<ul id="menu" class="bottom">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
</ul>

CSS

#menu {
    left: 0;
    background-color: red;
    width: 100px;
}
    #menu.bottom {
        position: absolute;
        bottom: 0;
    }
    #menu.top {
        position: fixed;
        top: 0;
    }

JQuery

var menu = $('#menu');

$(document).scroll(function () {
    if ($(this).scrollTop() >= $(window).height() - menu.height()) {
        menu.removeClass('bottom').addClass('top');
    }
    else {
        menu.removeClass('top').addClass('bottom');
    }
});

ここでの考え方は、もともとメニューをウィンドウに対して相対的に配置したいということです。それを「スクロール」したら、位置を固定に設定する必要があります。

JS を使用して特定のスタイルを削除することはできないため (たとえば、削除することはできませんtop)、2 つの異なるクラスを使用してこれを実装するのが最善です。そうすれば、プロパティを削除して、新しいスタイルを妨げないようにすることができます。

JS は、メニューの上部が最初にあった場所を計算し、これを現在のスクロール位置と比較します。メニューの位置を一度だけ計算して保存しない理由は、メニューが大きくなる可能性がある (おそらくメニュー項目が拡大する) ためですが、さらに重要なのは、ウィンドウ サイズを変更できることです。

于 2013-09-19T07:51:20.323 に答える
2

基本的に、メニューの位置は「固定」 - 下部に固定されています。

次に、ウィンドウがスクロールされたことを検出するハンドラーを入れます

$(window).scroll(function(){
    do stuff . . .
});

ページの位置を計算できます

if( pagePosVar != 0){
    do animate . . . (menu to top)
}else{
    do animate . . . (menu to bottom)
}

つまり、ページが一番上にない場合は、メニューを一番上に移動します。それ以外の場合は、メニューを一番下に戻します。メニューが上部にあるときは、メニューがまだ「固定」されていることを確認してください。今回は上部に移動し、残りのコンテンツはその後ろにスクロールします。

于 2013-09-19T07:41:14.687 に答える