Javascript 如何在滚动时保持这些标记悬停的位置接近标记，并且标记悬停具有固定位置？

|下面还有一个stackoverflow片段

在不滚动的情况下，标记悬停将正确显示：

问题 我想问题是因为我在taghover

tags model

类上设置了一个

fixed

位置。但是，我需要该div上的

固定

位置，以便标记悬停可以突破

.tags容器

的限制

有没有另一种方法可以实现这种效果，而不必重新设置标记悬停的样式，这样它们就必须适合

标记列的微小宽度大小

不滚动的正确位置

一旦滚动，固定标记hover的位置将中断

但是，一旦我开始滚动，标记悬停将失去它们与您悬停的标记的相对位置

---

.tags容器

，该容器具有

溢出-y:auto以显示滚动

每个标记都有一个关联的
标记悬停
指令

标记悬停具有此样式（因此它们可以在标记列的约束之外显示。）

CSS

TagHover.html

安古拉斯普朗克
文件。写（“”）；
终于！是的，没有CSS解决方案，我必须计算出当前鼠标的y位置，并使用ng样式来动态更新样式

TickerPanel组件
TickerPanel标记（包含传递了ticker的tagHover组件）
最后，标记悬停标记


^
tkhov
是
controllerAs
此
将u代码移动到snippet@AndreyFedorov在我的问题帖子中添加了正确的代码片段！是的，我试着对它进行了一点修补，但是没有解决让悬停显示在滚动条上方的问题。您可能想考虑更改标记，或者使用JS来定位悬停元素。是的，我正在尝试JavaScript路由！
<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
    <h1>Hover for: {{ tghov.tag.term }}</h1>
</section>

this.hoverTicker = (event, ticker) => {
    MousePosition.set(event);
    const mouseY = MousePosition.current.y;
    ticker.pos = { top: `${mouseY}px` };
    ticker.hoverDisplay = true;
};

<div class="tag-container" ng-mouseleave="tikp.leaveTicker(ticker)">
    <div class="ticker"
         ng-mouseenter="tikp.hoverTicker($event, ticker)"
         ng-click="tikp.selectTicker('portfolio', ticker);">
         <span ng-if="ticker.long && !ticker.hoverDisplay">
            {{ ticker.short }}
         </span>
         <span ng-if="!ticker.long || ticker.hoverDisplay">
            {{ ticker.ticker }}
         </span>
    </div>
    <ticker-hover ticker="ticker"></ticker-hover>
</div>

const set = (e) => {
    current.x = e.pageX;
    current.y = e.pageY;
}

<div class="ticker-hover-container"
    ng-style="tkhov.ticker.pos" ng-show="tkhov.ticker.hoverDisplay">