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

我想弄清楚CSS中的绝对/固定位置，将徽标放在网页的右下角并让它停留在那里，即使页面内容滚动。我已经完成了一半，但如果浏览器窗口很小，现在需要停止徽标在页面上移动太高。绝对/固定位置：防止项目滚动

我创建的我怎么想它的工作，并把它们在以下链接为PDF图纸和简要说明：

Click here

谁能帮助我，好吗？

Gary

来源

2012-05-13 user1392546

我们可以看到CSS？ –

这是可能的.. –

哇 - 这很快，谢谢！ CSS只是将div设置为： position：fixed; left：720px; bottom：0px; – user1392546

我不认为这是可能的，只是普通的CSS。（至少没有使用一些疯狂的CSS黑客）。但与jQuery应该是可能的：http://jquery.com/ 有一些jQuery的粘性/固定位置插件像http://www.orangecoat.com/stickyscroll 但我不知道如何或如果他们正在解决您遇到的问题。最糟糕的情况是你必须自己写脚本。希望这有助于一点，即使我无法提供一些代码。
P.S.在这里，这是基本相同的问题：http://answers.yahoo.com/question/index?qid=20120302190313AAJhUIp

来源

2012-05-13 19:55:59 Stefan

它可以用纯CSS完成。我会做一个演示... –

谢谢Stefan和ŠimeVidas--非常感谢你对此的帮助。一天中的大部分时间都让我发疯！期待您的演示，ŠimeVidas ... – user1392546

PS - 如果有帮助，徽标的顶部不得高于窗口顶部的450像素。 – user1392546

所以，标志应该是position: fixed，但只有如果视口高度比预定最小值大。可以实现与媒体查询：

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

现场演示：http://jsfiddle.net/KC3UU/show/light/（降低了浏览器窗口的高度，直到图像与灰色DIV碰撞）

来源

2012-05-13 20:02:48

不错。浏览器的兼容性如何？ – Stefan

@Stefan除IE8/7之外的所有内容。但是，IE有一个[polyfill]（https://github.com/scottjehl/Respond）。 –

@ŠimeVidas - 非常感谢你。我已经完成了一点，但有两个问题。首先，我需要与IE7/8兼容，但不知道如何实现polyfill。我在编码方面有点新手 - 你可以将它添加到你的演示中，这样我就可以看到如何做到这一点？其次，当高度很小时，标志占据绝对位置，当我滚动时它不会向下移动。是否有可能做到这一点？（也就是说，一旦用户向下滚动页面至少达到绝对顶部位置，它会再次固定到底部？）。再次感谢，加里。 – user1392546

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

回答

相关问题