页面中的浮动链接 [英] Floating Link in Page

问题描述

我想建立浮动连结，无论使用者是否卷动网页，都会显示在网页中。

I want to make floating link which will be displayed in webpage whether user scrolls up/down the page.

<div id="valids" style="position: fixed; bottom: 5px; left: 5px;">
<a href="http://validator.w3.org/check?uri=referer" class="valid">
<img alt="Valid XHTML 1.0" src="http://www.w3.org/Icons/valid-xhtml10-blue" style="border: 0pt none ; width: 88px; height: 31px;"/></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.reapercharlie.com" class="valid">
<img alt="Valid CSS 2.1" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" style="border: 0pt none ; width: 88px; height: 31px;"/></a>
</div>

这完全显示在Firefox，Chrome，IE 9以上。
但是我需要使它与IE 8和IE 7至少一起工作。

This is perfectly displayed in Firefox, Chrome, IE 9 onwards. But I need to make it work with IE 8 and IE 7 atleast.

在IE 8和IE 7中，内容与页面内容一起上升。

In IE 8 and IE 7, the content goes up along with page content.

推荐答案

此贴子如何获得position：fixed css使用TRANSITIONAL doctype在IE 7+中工作建议您需要添加一个doctype以获得IE7 / 8触发标准模式，您是否尝试过？

This post How to get "position:fixed" css to work in IE 7+ with TRANSITIONAL doctype? suggests that you need to add a doctype to get IE7/8 to trigger standards mode, have you tried this?

如果您不想混乱使用doctypes，则可以尝试使用jQuery，而不是 http：// jsfiddle。 net / wRSZ2 / 。

if you don't want to mess around with doctypes, you could always try using jQuery instead http://jsfiddle.net/wRSZ2/.

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    $("#mybox").css("top", scrollTop + "px");
});​

上面的代码，你可以简单地连接到窗口滚动事件，并手动滚动框与窗口。看起来对我很好，但我没有测试它在IE 7/8！

The the code above, you could simply hook up to the window scroll event and scroll the box manually along with the window. Looks pretty ok to me, but I haven't tested it on IE 7/8!

希望它有帮助！

这篇关于页面中的浮动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！