如何在javascript / jquery中显示相对于视口而不是网页的弹出元素？

问题描述

我有一个网页，其中包含一个视频和图片表，单击这些项目中的任何一项时，单击的项目将显示在浮动弹出显示区域中，但是当前该区域显示在屏幕顶部附近。网页，因此当用户滚动网页时，视频和图片表会完全滚动到视图中，因此通常会部分关闭屏幕，因此用户必须向上滚动页面才能查看浮动弹出式窗口，显示区域，远离他们在表中单击的行项目，他们可以在其中编辑有关该项目的信息。

我希望将弹出显示区域显示在视口顶部附近，这样就可以完全看到它，而无需用户将其滚动到视图中，并且视频和图片表现在位于弹出窗口下方向上显示停留在用户单击表中任何项目之前的位置。

我已经看过这个主题Set element to top of viewport in javascript [duplicate]，但是我不想固定显示区域，因为用户应该能够正常滚动网页，并且弹出显示区域会随着页面上的其余元素。

完成此操作后，我将使弹出区域可拖动，因此建议的解决方案应与此兼容。我计划使用How TO - Create a Draggable HTML Element而不是使用jQuery或其他类型库。这样，我可以优化页面上唯一可拖动项弹出元素的代码。

谢谢

解决方法

我也遇到了同样的问题。然后我发现了一个我使用的 CSS 技巧。

.elements:nth-last-child(-n + 3) {
        // Insert CSS you want to apply
}

.elements:nth-last-child(n + 3) {
        // Insert CSS you want to apply
}

它帮助我实现了所需的解决方案。在 JavaScript 和 View 中没有任何变化。您只需要使用 n 数字进行计算。

作为参考，您可以使用以下文档 - https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child