单击任何页面时显示Div显示

Question

我有一个滚动页面的网站。我有一个导航菜单，始终保持在浏览器的顶部。其中一个列表项是联系页面。我希望有一个div fadeIn（我可以毫不费力地使用jQuery），无论你碰巧在页面上。所以我想知道如何定义它的位置？例如，如果我在页面的一半滚动，然后点击联系人链接，它是否只是出现在那里与在页面顶部备份？

Answer 1

您可以在联系人div上使用position:fixed;。使用简单的JS脚本，您可以动态设置top和left属性，将div放在屏幕中央。

fixed位置相对于视口。 absolute位置与文档相关。

您可以在this w3school example上测试这些CSS属性。降低浏览器高度以添加滚动条并比较固定位置与绝对位置的结果。

编辑： basic fixed position popup（小提琴）

您可以使用$(window).width()或$(window).height()获取视口大小。然后你可以在jQuery对象上使用等效的jQuery方法获得popup div大小。最后，您使用以下方法计算正确的位置：（viewPortSize / 2） - （divSize / 2）。

请注意，如果div不可见（例如display:none），则其大小将为0！这就是为什么我在定位弹出窗口之前调用.fadeIn()函数以确保div可见。