Question

你好我对jquery比较新，但我喜欢它，想知道我是否可以在页面的右下角设置div ，以便位置保持固定甚至当我们向下滚动页面时。此后，我需要通过div中的图像将链接传递给页面中的特定锚点。它应该简短。

Answer 1

#divid{
    position: fixed;
    right: 0;
    bottom: 0;
}

Answer 2

如果您接受IE6中不支持position:fixed且IE7有caveats，那么请不要使用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>

等。但是，如果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>

或其他相似之处。 HTH。

Answer 3

不需要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>

但如果是我，我会这样做：

（假设图像的宽度和高度为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>

Answer 4

检查此link：这是如何修复始终可见的页脚

最简单的jquery让div“position：fixed”到右下角（总是......就像向下滚动一样）？

4 个答案: