想象一长串博客文章，每篇文章的左侧都有一张头像。我想知道一种有效的(跨浏览器)方法，使个人资料图片保持在当前屏幕上其博客文章最上部分的左侧:
页面会像这样打开:
--------------------Top of window-----------------
--- --------------------------------------
|A| | A's post |
--- | |
| |
| Line 4 |
| |
| |
| |
| |
| |
--------------------------------------
--- --------------------------------------
|B| | B's post |
--- | |
| |
| |
| |
| |
| |
| |
| |
--------------------------------------
但是当页面向下滚动时，它看起来像这样:
--------------------Top of window-----------------
--- | Line 4 |
|A| | |
--- | |
| |
| |
| |
--------------------------------------
--- --------------------------------------
|B| | B's post |
--- | |
| |
| |
| |
| |
| |
| |
| |
--------------------------------------
最后像这样(注意 A 的个人资料图片底部与博客文章底部对齐，两者都移出了屏幕顶部):
--------------------Top of window-----------------
|A| | |
--- --------------------------------------
--- --------------------------------------
|B| | B's post |
--- | |
| |
| |
| |
| |
| |
| |
| |
--------------------------------------
我希望我的解释很清楚!
理想情况下，我可以完全在 CSS 中实现这一点(我非常怀疑这在支持 IE7 的情况下是否可行!)但是使用 jQuery 实现这一点的有效方法也将受到赞赏。
谢谢!
最佳答案
当此元素离开屏幕时，您必须使用 javascript 检查，而不是将其 css 位置设置为固定，没有 css 唯一的方法可以做到这一点。
关于HTML:在不离开屏幕的情况下，将元素尽可能高地保持在它自己的元素内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8397498/