绝对/固定位置:防止项目滚动

时间:2012-05-13 19:40:15

标签: css css-position

我试图找出CSS中的绝对/固定位置,在网页的右下角放置一个徽标,并让它保留在那里,即使页面内容滚动也是如此。我已经实现了这一目标,但是如果浏览器窗口很小,现在需要阻止徽标在页面上移动得太高。

我已经创建了一个绘图并简要说明了我希望它如何工作,并将它们作为pdf放在以下链接中:

Click here

有人可以帮助我吗?

加里

2 个答案:

答案 0 :(得分:2)

因此,如果视口高度大于预定义的最小值,则徽标应为position: fixed,但。您可以通过媒体查询实现这一目标:

@media screen and (min-height: 300px) {
    #logo {
        position: fixed;
        /* your other styles */
    }    
}

现场演示: http://jsfiddle.net/KC3UU/show/light/(缩小浏览器窗口高度,直到图像与灰色DIV发生碰撞)

答案 1 :(得分:0)

我认为只用普通的CSS就不可能了。 (至少没有使用一些疯狂的CSS黑客)。但是应该可以使用jquery:http://jquery.com/ jQuery有一些粘性/固定位置插件,如http://www.orangecoat.com/stickyscroll 但我不知道他们是如何或是否正在解决你所面临的问题。最糟糕的情况是你必须自己编写一个脚本。希望这有点帮助,即使我无法提供一些代码。
附:这基本上是同一个问题:http://answers.yahoo.com/question/index?qid=20120302190313AAJhUIp