如何在页面上创建一个始终保持可见但偏离其他元素的元素？

Question

我有一个非常复杂的布局（see here）的HTML页面。我需要在该页面上放置一个图像，访问者可以将其拖到任何地方，以便记住她在哪里。我已经实现了书签功能，但现在我需要将图像放在她可以轻松抓住它的地方。

基本上，我希望元素保持在右边的ToC下方，但它不应该滚出视图。

我想我可以使用JavaScript在元素开始向外滚动时移动它，但有更好的选择吗？我可以说“在ToC div或view.top正下方浮动，哪个更大”？

或许我应该创建一个固定的标题（带链接和可能的ToC）？

还有其他想法吗？

Answer 1

如果您只想修复图像，但仍然可以滚动到窗口顶部，那么您需要处理窗口的滚动事件，并在图像滚动到顶部时将图像的位置设置为固定

有关此示例，请参阅QuirksMode上的网站导航。

或者，你可以给出整个TOC position: fixed; right: 0;，给toc一个宽度，并给前贴片一个等于TOC宽度的右边距。这种方式不会有JavaScript要求，并且您可以始终看到整个TOC。

Answer 2

它可以使用JQuery完成，但总是会紧张不安。我会考虑一个固定的DIV。当然你可以将它放在菜单下面，这样它就不会比菜单更高（=更接近顶边），并保持其位置。

.thingy { position: fixed; right: 0px; top: 415px; width: 256px }

这样就必须在菜单下面没有其他内容，否则书签图标将与其他内容重叠。