Question

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

Answer 1

这是一个使用jquery的解决方案

jsfiddle demo

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;  
}

Answer 2

取决于之前的答案帮助我完成了我想要做的事情，保持一个标题div与position-y固定，一个left div与position-x固定，一个内容div将在x和y上滚动

如果有人发现它有用，我会发布我的jsfiddle：

My jsfiddle demo

HTML

<body>
<div style="width:5000px;height:1000px;">
    <div id="box1" class="box">
        My position-x is fixed but position-y is scrollable.
    </div>
    <div id="box2" class="box">
        My position-y is scrollable but position-x is fixed.
    </div>
    <div id="box3" class="box">
        My position-x and position-y are both scrollable.
    </div>
</div>

代码

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

CSS

.box {
    position:fixed;
}
#box1 {
    top: 0px;
    left: 120px;
    width: 1000px;
    height: 20px;
    background-color: #FF0000;
    z-index:150;
}
#box2 {
    top: 0px;
    left: 0px;
    width: 120px;
    height: 520px;
    background-color: #00FF00;
    z-index:200;
}
#box3 {
    top: 20px;
    left: 120px;
    width: 1000px;
    height: 500px;
    background-color: #0000FF;
    color: white;
    z-index:100;
}

位置：固定和绝对同时。怎么样？

2 个答案: