0

スクロールする div 内にPoshy Tipを作成すると、div がスクロールされたときにヒントが移動しません。

このフィドルを参照してください。

これは、ヒント div が<body>スクロール コンテナー div の子ではなく、の子であるためだと思います。

これを回避する方法はありますか?

4

3 に答える 3

1

JSFIDDLE v2

説明：

PoshyTip は実際にはドキュメントの最後に作成され、top:0px と z-index:1000 を持つ position:absolute が与えられます。これは、常に body をオーバーレイしてそこに配置されることを意味します。これを機能させるには、DOM を変更して PoshyTip を Click me に移動する必要があるため、次のようになります。

<span id="tip">Click me
    <div class="tip-yellow" style="visibility: inherit; left: 62px; top: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; opacity: 1;"><table class="tip-table" border="0" cellpadding="0" cellspacing="0" style="width: 169px;"><tbody><tr><td class="tip-top tip-bg-image" colspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td><td class="tip-right tip-bg-image" rowspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td></tr><tr><td class="tip-left tip-bg-image" rowspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td><td style="width: 100%;"><div class="tip-inner tip-bg-image" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);">Scroll and I won't move</div></td></tr><tr><td class="tip-bottom tip-bg-image" colspan="2" style="background-image: url(http://vadikom.com/demos/poshytip/src/tip-yellow/tip-yellow.png);"><span></span></td></tr></tbody></table><div class="tip-arrow tip-arrow-left" style="visibility: inherit;"></div></div>
</span>

次に、SPAN の position:relative を次のように設定する必要があります。

<span id="tip" style="position:relative;">Click me

最後に、tip-yellow クラスに top:-8px を設定する必要があります。

<div class="tip-yellow" style="top:-8px; visibility: inherit; left: 62px; top: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; opacity: 1;">
于 2013-08-05T12:51:56.537 に答える
0

poshytip は本文にオーバーレイされて配置されるため、ソース ファイル jquery.poshytip.js を変更して、".appendTo(document.body)" を ".insertAfter(this.$elm)" に置き換えられなかったのはなぜですか。その後、ヒントはスクロール要素とともにスクロールできます。

于 2014-01-05T05:33:49.890 に答える