Poshy提示不随滚动元素移动

Poshy Tip not moving along with scrolling element

本文关键字：元素 移动 滚动 提示 Poshy      更新时间：2023-09-26

在滚动div中创建Poshy Tip时，当滚动div时，Tip不会移动。

看看这把小提琴。

我假设这是因为tip-div是<body>的子级，而不是滚动容器div的子级

有办法解决这个问题吗？

JSFIDDLE v2

描述：

PoshyTip实际上是在文档的末尾创建的，并被赋予一个位置：absolute，顶部：0px，z索引：1000，这意味着它将始终覆盖在正文上并定位在正文上。为了实现这一点，您必须更改DOM，将PoshyTips移到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的位置：相对的，所以它会是这样的：

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

最后，你需要设置顶部：-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;">

我不喜欢这个插件，但在网上浏览后，我得到了关于问题的答案

您可以查看工具尖端扭曲的样式属性，并看到它包含"left"answers"right"属性。没有position css属性，它的get默认值为"static"。

您可以阅读更多关于"position"属性和"static"值的信息，特别是在w3c上。一般来说，我可以告诉你，只要"position"属性不是"固定的"，元素就不会固定到第一个"position:relative"div

既然poshytip覆盖在主体上并定位在主体上，为什么不能更改源文件jquery.poshytip.js，将".appendTo（document.body）"替换为".insertAfter（this.$elm）"。然后，tip可以随滚动元素一起滚动。

相关文章：