0

こんにちは、このhttp://engageinteractive.co.uk/に似たトップ ナビゲーション システムを構築しています (メイン画像の下をスクロールすると、透明なナビゲーション バーが透明な色になります)。私のデザインでは、ナビゲーションバーに固定位置を与え、次のコードを適用しました

$(window).scroll(function() {
    var top_val = $(window).scrollTop();
    if(top_val > 600) {
        $("#main_nav_container").removeClass('transparent_0');
        $("#main_nav_container").addClass('transparent_1');
    }
});

これは私にとってはうまく機能しており、メイン サイトの画像 (値が 600 であることがテストされています) を渡した後、ナビゲーション コンテナーの表示が変更されます。問題は、レスポンシブ デザイン用にこれを調整する必要があることです。メインのトップ画像はブラウザのサイズに応じてサイズが変わるため、何らかの方法で scrollTop() プロパティから取得した固定値を相対的なサイズに変換する必要があります。誰かがこれで私を助けてくれれば幸いです

4

1 に答える 1

1

メイン画像の位置を読み取って、それscrollTop()に対して評価する必要があります。このようなもの、おそらく：

    var main_img = $('img.main_img'),
scroll_change_at = main_img.offset().top + main_img.height();

$(window).scroll(function() {
    var top_val = $(this).scrollTop();

    if(top_val > scroll_change_at) 
    {
        $("#main_nav_container").removeClass('transparent_0');
        $("#main_nav_container").addClass('transparent_1');
    }
});

main_img明らかに、割り当てに関連するセレクターを置き換えます。

于 2013-01-25T17:22:45.810 に答える