jquery - Making a Div Display When Clicked Wherever the Page is

Question

I have one page site that scrolls. I have a navgation menu that remains at the top of the browser at all times. One of the list items is the contact page. I'd like to have a div fadeIn (which I have no trouble doing with jQuery), wherever you happen to be on the page. So I was wondering how do I define it's position? For instance, If I am scrolled half way down the page, and click the contact link, can it just appear right there vs say back up at the top of the page?

Answer 1

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

fixed位置是相对于视口的。 absolute位置是相对于文档的。

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

编辑： 基本固定位置弹出（小提琴）

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

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