0

リスト要素で構築されたシンプルなメニューがあり、これは全幅のコンテナ上に浮かんでいます。これらのコンテナの一部は他のコンテナよりも暗いため、メニューの各要素がそれらの上に来るタイミングを定義できるようにしたいと考えています。

したがって、より暗いコンテナにいくつかのクラスを追加し、それらのオフセットを取得する関数を作成しました。

function getOffsets(){
    var offsets = [],
        colorChangers = $(".colorChange").length,
        top,
        bottom;

    for(i = 0; i < colorChangers; i++){
        top = $(".colorChange").eq(i).offset().top; // where container begins
        bottom = top + $(".colorChange").eq(i).css("height"); // where container ends
        offsets.push(top);
        offsets.push(bottom);
    }

    return offsets;
}

次に、ウィンドウ スクロール イベント中の .colorChange コンテナーとメニューの要素のオフセットを比較します。一致した場合、メニューでその要素の追加のクラスを切り替えたい:

function setMenu(toggleAt){
    var winScrollTop = $(window).scrollTop(),
        newPos = 90 + winScrollTop,
        topPos,
        item = $("#FloatMenu ul li"),
        menuItems = item.length;

    if(winScrollTop > 90){
        $("#FloatMenu").is(":visible") ? "" : $("#FloatMenu").show();
        topPos = (newPos - 90) + 10;        
        $("#FloatMenu").css("top", topPos);
    } else{
        $("#FloatMenu").hide();
    }

    for(i = 0; i < menuItems; i++){
        $this = item.eq(i);
        for(var j in toggleAt){
            $this.offset().top == toggleAt[j] ? $this.toggleClass("white") : ""; // toggle class "white"
        }
    }
}

残念ながら、正しく動作しません (スクロールバーをゆっくり使用すると時々)、理由はわかりますか? ここにフィドルがあります

4

1 に答える 1

1

これが私が解決策を見る方法です：

- スクロール
時 -- メニュー要素の上部オフセットを取得します。
-- document.elementFromPoint(x,y); を使用して、そのポイント (オフセット) から始まるコンテナーを取得します。
-- 要素にクラス .colorChange があるかどうかを確認し、ない場合は element.parents('colorChange') を検索して、その親のいずれかに colorChange クラスがあるかどうかを確認します。
- そのクラスがある場合は、要素の色を変更します。

ここで、いくつかのコーディングを試してみましょう（少し役立つことを願っています）： 

$(window).scroll(function(e){
    $('.menu_elment').each(function(index) {
        menu_elem_offset_top = $(this).offset().top;  
        container_elem = document.elementFromPoint(0,$(this).offset().top);
        if($(container_elem).hasClass('colorChange') || $(container_elem).parents('.colorChange').length != 0) {
            // change the color of the menu 
            $(this).css({'color':'#fff'});
        }
    });
});
于 2013-07-30T14:44:23.717 に答える