4

ナビゲーション バーが固定されている Web サイトを持っています。Zurb Joyride を使用して、ナビゲーション バーの要素にヒントを追加したいと考えています。問題は、ページをスクロールすると、ナビゲーション バーは表示されたままですが、ツールチップは表示されないことです。

(代わりに) ナビゲーション バー内の要素にツールチップを添付しようとしましたbodyが、奇妙なレンダリングの問題が発生しました。ヒントを含む設定position: fixedは機能しdivているようですが、要素が固定位置のコンテナー内に含まれているため、要素が非スクロールであるかどうかをプログラムで検出する簡単な方法があるかどうか疑問に思っています。 Joyride のヒントをいつ修正するかを設定します。助言がありますか？

4

4 に答える 4

4

これは純粋な JavaScript のアプローチです。固定された親が見つかるまで (またはまったく親が見つからないまで)、すべてのオフセットの親を反復します。

function isFixed(elem){
    do{
      if(getComputedStyle(elem).position == 'fixed') return true;
    }while(elem = elem.offsetParent);
    return false;
}

jQuery を使用している場合は、elem[0]またはを使用してノード オブジェクトを抽出する必要がありますelem.get(0)。

于 2016-09-11T17:11:32.797 に答える
2

jQuery を使用してこれを行うことができます。簡単にするために、固定位置コンテナーである祖先要素に「祖先」のクラスがあるとしましょう。また、子孫 (Joyride のヒント) に「子孫」のクラスがあるとしましょう。これらの前提はどちらも、HTML に簡単に追加できるものである必要があります。あるいは、既存のクラスを別の jQuery セレクターとして使用することもできます。次に、このようなことを行って検出を行うことができます。

if ($(".descendant").closest(".ancestor").css("position") == "fixed") {
    // set your Joyride tip to fixed
}

更新しました

やりたいことを少し遠ざけてしまったので、「先祖の位置が固定されていて、スクロールするより近い先祖がいないかどうかを確認するにはどうすればよいですか？」というような質問だと思います。それに加えて、どの祖先にもクラスまたは ID が指定されていないという要件があります。この例のためだけに、Joyride ストップはすべて「joyride-stop」のクラスを持っていると仮定します。したがって、Joyride ストップに固定位置を適用するかどうかを決定するには、次の手順を実行するだけです (zurb joyride には依存関係があるため、jQuery を使用します)。

var jStops = $(".joyride-stop");

for (var i=0; i<jStops.length; i++) {
    var pEls = jStops[i].parents();
    for (var j=0; j<pEls.length; j++) {
        if(pEls[j].css("position") == "fixed") {
            // closest ancestor is fixed.
            // insert code to fix your Joyride element here
            break;
        } else if (pEls[j].css("overflow") == "scroll") {
            // closest ancestor scrolls so just break and move on
            break;
        }
    }
}

overflowここではcss プロパティのみを確認したことに注意してください。さらに詳しく知りたい場合は、overflow-x、overflow-y、およびスクロールが存在するかどうかに影響を与える可能性のあるその他の属性 (他のカスタム JavaScript ウィジェットなど) を確認できます。チェックは、実際にページで何を心配する必要があるかによって異なります。

これはあなたが求めていたものですか？

于 2013-07-03T00:31:06.240 に答える
1

jQueryを使用する方法は次のとおりです。

var ancestorFixed = false;
$element.parents().each(function () {
    ancestorFixed = ancestorFixed || ($(this).css('position') == 'fixed');
});
于 2015-11-13T21:26:45.967 に答える
0

これまでのところ、私が得た最善の解決策はli、ヒントの を を持つスタイルで手動で分類することposition: fixedです。

position: fixedより近い祖先にスクロールするコンテンツがある場合、祖先を持つ要素がまだスクロールする可能性があることに注意してください。そのため、単一position: fixedの祖先を検出することで問題を解決する一般的な静的メソッドはおそらくないでしょう。理想的な解決策は、スクロール時にヒントの位置を動的に更新して、ターゲット要素に対して固定されていることを確認することだと思います。

于 2013-07-03T11:06:49.567 に答える