0

私はワードプレスを使用していますが、動的サイドバーがあります。サイドバーには多くのウィジェットがあります。私がやろうとしているのは、画面に表示される divis (ウィジェット) を表示することです (onload - ページが読み込まれた後)。他のウィジェットは非表示になります（不透明度0またはそのようなもの）が、スクロールすると、そのウィジェット（画面に表示されなかった）がフェード効果で表示されます。

すべてのサイドバーブロックを非表示にするこのコードを使用してopacity=0、ロード中です。

画面に表示されているすべてのウィジェットを常に表示し、スクロール時にフェード効果を他のウィジェットに適用するには、助けが必要です。

    $(document).ready(function(){
tiles = $("#sidebar1 div").fadeTo(0, 0);
});
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

スクロール機能が働いています。問題は、ページが完全に読み込まれると、すべてのウィジェットを保持するサイドバー クラスが不透明度 0 (display:none など) になることです。私が必要としているのは、opacity=1画面に表示されるすべてのウィジェット (たとえば、10 個のウィジェットのうち 2 個) にページがロードされるときです。ユーザーがスクロールすると、他のウィジェットがフェード効果で互いに表示されます。

4

1 に答える 1

0

これらのウィジェットを表示するコードのブロックを抽出し、関数に入れます。次に、ハンドラーを両方に追加し、scrollこの関数を指す「DOM Ready」にします。

// Determine show or hide
function showOrHide(){$(document).ready(function(){
  $("#sidebar1 div").each(function(i) {
    var a = $(this).offset().top + $(this).height();
    var b = $(window).scrollTop() + $(window).height();
    if (a < b) $(this).fadeTo(500,1);
  });
}

// Assign to both
$(document).ready(showOrHide);
$(window).scroll(showOrHide);

ここにパフォーマンスのペナルティがあります。1 秒間に数回スクロール ファイアします。eachこれらの要素の DOM をクエリして、1 秒間に複数回実行することは望ましくありません。それは検索にお任せします（SOでもCodeReviewでもよく聞かれます）

于 2013-08-24T11:39:32.840 に答える