jQuery 最简单的jquery将div“位置：固定”放在右下角（总是......就像向下滚动一样）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5348557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
simplest jquery to have div "position:fixed" to the bottom right corner(always.. like on scrolling down)?
提问by yb007
Hello i am relatively new to jquery but i like it, was wondering if i can have a div positioned at the bottom right cornerof the page so that it's position remains fixedthere even when we scroll down the page. Thereafter i need to pass a link through an image in the div to a specific anchor in the page. It should be short and simple.
你好，我对 jquery 比较陌生，但我喜欢它，想知道我是否可以在页面的右下角放置一个 div ，这样即使我们向下滚动页面，它的位置也保持固定在那里。此后，我需要通过 div 中的图像将链接传递到页面中的特定锚点。它应该简短而简单。
回答by Santosh Linkha
#divid{
position: fixed;
right: 0;
bottom: 0;
}
回答by mway
If you're okay accepting that position:fixedisn't supported in IE6 and IE7 has some caveats, then don't use jQuery at all:
如果您可以接受position:fixedIE6 不支持，并且 IE7 有一些警告，那么根本不要使用 jQuery：
<style type="text/css">
#myFixedDiv {
position: fixed;
bottom: 0;
right: 0;
...
}
</style>
<div id="myFixedDiv">
<a href="#myTargetDiv"><img src="img.gif" /></a>
</div>
<div id="myTargetDiv">
...
</div>
etc. However, if IE6 is an issue, or if that doesn't work for whatever reason, you can just bind an event to the window scrollevent to help out:
等等 但是，如果 IE6 是一个问题，或者由于某种原因它不起作用，您可以将事件绑定到窗口scroll事件以提供帮助：
<script type="text/javascript">
var $myFixedDiv = $('#myFixedDiv');
var iFixedDivHeight = $myFixedDiv.outerHeight({ 'margin': true });
$(window).bind('scroll', function(e) {
var iWindowHeight = $(window).height();
var iScrollPosition = $(window).scrollTop(); // or document.body.scrollTop
$myFixedDiv.css({ 'top': iWindowHeight + iScrollPosition - iFixedDivHeight });
});
</script>
or something to that effect. HTH.
或类似的东西。哈。
回答by moe
No jQuery needed
不需要jQuery
<div id="fixed-element" style="position:fixed; bottom:5px; right: 5px; z-index: 999">
<a href="#myAnchor"><img src="/src/to/image.jpg" /></a>
</div>
But if it was me, I would do this:
但如果是我，我会这样做：
(Assuming the width and height of the image are 30px, using inline CSS but I'd have it in an external file)
（假设图像的宽度和高度为 30px，使用内联 CSS，但我将它放在外部文件中）
<a href="#myAnchor" id="fixed-element" style="display:block; position:fixed; bottom:5px; right: 5px; z-index: 999; width: 30px; height: 30px; background:url(/src/to/image.jpg) no-repeat 0 0 transparent; text-indent: -9999">Click me</a>
