位置:固定和绝对同时.怎么样？

Question

我想创建一个非常薄且非常高的Element.我希望元素始终可见,即使您向右滚动也是如此.它应该是位置:固定在右边,然后是左边,但它应该可以向下和向上滚动.我用谷歌搜索,但找不到合适的方法来解决问题.我只找到了这个网站:http: //demo.rickyh.co.uk/css-position-x-and-position-y/ 这正是我想要的,但我使用的是jQuery,而不是MooTools.我在jQuery中寻找相同的功能.我真的不想使用2个框架.有人知道帮助吗？什么？我一直在寻找几个小时,但我在jQuery中找不到符合我需求的东西.

Answer 1

这是jquery的解决方案

jsfiddle演示

HTML

<div style="width:1000px;height:1000px;">
    <div id="box1" class="box" style="left:20px;top:20px;">
        My position-x is fixed but position-y is absolute.
    </div>
    <div id="box2" class="box" style="left:20px;top:120px;">
        My position-x is absolute but position-y is fixed.
    </div>
    <div id="box3" class="box" style="left:20px;top:220px;">
        Im positioned fixed on both axis.
    </div>
</div>

代码

$(window).scroll(function(){
    var $this = $(this);
    $('#box1').css('top', 20 - $this.scrollTop());
    $('#box2').css('left', 20 - $this.scrollLeft());
});

和一些CSS

.box 
{
    width:400px;
    height:80px;
    background:gray;
    position:fixed;  
}