[WordPress] クラスを追加するページの種類に応じてさまざまな時点で Javascript スクロール関数

スポンサーリンク

Question

視聴者が過去のページの特定のポイントにスクロールしたときに、サイドバーを修正、固定サイドバー ナビゲーションのための単純な javascript 関数があります。これは私の最初の投稿と javascript に新しいです

この問題は今、ページ バナーをクラスは異なるスクロール時点で追加する必要があります

以下は私が今、働くがだけ 2 番目の関数を使用します。私のページ バナー、サイド バーなし意味、遅すぎる固定になります

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 147) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});
$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 263) {
        div.addClass("fixed-product-nav");
    } else {
        div.removeClass("fixed-product-nav");
    }
});
});

ステートメント、しかし、今する必要がありますページ id 固有ではない場合の取り扱い方法をしようとしました。私は試みた、[id ^ =”mbItem”] セレクター、しかし、それは技術的に両方のページがそれらの id を持っているので働かない。下記参照

$(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (div.hasClass('mk-main-wrapper')) {
        if (scroll > 147) {
        div.addClass("fixed-product-nav");
        } else {
        div.removeClass("fixed-product-nav");
        }
    } else {
        if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    }
});
});

以下なしにページ バナーの私の HTML の構造です

以下のページのバナーの私の HTML の構造です

<...HTML...>

ページ ID は、両方のページに残ってがサイドバー ラッパーなしバナーのみの親です

うまくいけば、これは意味が、ワードプレス テーマの枠内から取り組んで

ような気が私はすぐ近くにあります、しかし、今多分。任意の助けをいただければ幸いです !

答え

私はあなたが投稿した 2 番目の部分で間違っている div を対象とするいると思うがあなたの HTML を参照してくださいする必要があります。「バナーなしページは mk メイン ラッパー div の中」つまり .sidebar ラッパー クラスが最もおそらくそれの親 (または、HTML コードによって、親の親) が持っている場合を検索する必要はありません。このようなもの:

   $(function() {
var div = $(".sidebar-wrapper");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (div.parent().hasClass('mk-main-wrapper')) {
        if (scroll > 147) {
        div.addClass("fixed-product-nav");
        } else {
        div.removeClass("fixed-product-nav");
        }
    } else {
        if (scroll > 263) {
            div.addClass("fixed-product-nav");
        } else {
            div.removeClass("fixed-product-nav");
        }
    }
});
});

http://stackoverflow.com/questions/27869487/javascript-scroll-function-to-add-class-at-different-points-depending-on-type-of

スポンサーリンク

Leave a Reply