【发布时间】:2013-01-03 09:30:54
【问题描述】:
我设计了一个简单的网站。唯一剩下的就是在左边做一个小盒子。但即使向下滚动,我也希望始终可见。它的用途就像一个小广告。 ![浮动框][1]
你能发布一两个例子吗?为此需要什么CSS? (如果需要)
很遗憾,我不能发布任何图片,因为我是新用户(我不被允许......这有点令人沮丧)
但我会尽快发布图片。
【问题讨论】:
我设计了一个简单的网站。唯一剩下的就是在左边做一个小盒子。但即使向下滚动,我也希望始终可见。它的用途就像一个小广告。 ![浮动框][1]
你能发布一两个例子吗?为此需要什么CSS? (如果需要)
很遗憾,我不能发布任何图片,因为我是新用户(我不被允许......这有点令人沮丧)
但我会尽快发布图片。
【问题讨论】:
您应该将position: fixed 应用于此框。
固定定位
固定位置的元素相对于浏览器定位 窗口。
即使窗口滚动也不会移动。
这是一个示例:http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
您可以在此处阅读有关 CSS 定位的更多信息:http://www.w3schools.com/css/css_positioning.asp
这是我为你制作的一个 jsFiddle,它展示了如何让它工作:http://jsfiddle.net/leniel/8ub7s/2/
您可以看到,即使滚动,标题仍然可见,如果您将其悬停,广告框就会显示。只需根据您的需要调整 CSS,因为您希望它向左浮动。 :)
【讨论】:
<div id="myBox" style="display:none">My ad here!</div> 内。然后它以display:none(invisible) 开头。现在您可以添加一些 jQuery 代码,使其在鼠标悬停时出现并在鼠标移出时消失,使用如下代码:stackoverflow.com/a/5404862/114029 只需将 $('.cat').hover 替换为 $("#myBox").hover。