javascript 位置:同时固定和绝对。如何?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5317695/
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
position: fixed and absolute at the same time. HOW?
提问by Mischka
I want to create an Element, which is very thin, and very high. I want the element to be visible all time, even if you scroll to the right. It should be position:fixed to the right, and left, but it should be scrollable down and up. I searched with google, but couldn't find an appropiate way to solve the problem. I only found this site: http://demo.rickyh.co.uk/css-position-x-and-position-y/This is exactly, what I want to have, BUT I am using jQuery, and not MooTools. I am looking for the same function in jQuery. I do not really want to use 2 Frameworks. Does anyone know help? Anything? I have been looking several hours, but I can't find something that fit to my needs in jQuery.
我想创建一个非常薄且非常高的元素。我希望元素始终可见,即使您向右滚动也是如此。它应该是位置:固定在右侧和左侧,但它应该可以上下滚动。我用谷歌搜索,但找不到解决问题的合适方法。我只找到了这个网站:http: //demo.rickyh.co.uk/css-position-x-and-position-y/这正是我想要的,但我使用的是 jQuery,而不是 MooTools。我正在 jQuery 中寻找相同的功能。我真的不想使用 2 个框架。有谁知道帮助吗?任何事物?我已经找了几个小时了,但我在 jQuery 中找不到适合我需要的东西。
回答by agradl
Here's a solution with jquery
这是jquery的解决方案
the html
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>
the code
代码
$(window).scroll(function(){
var $this = $(this);
$('#box1').css('top', 20 - $this.scrollTop());
$('#box2').css('left', 20 - $this.scrollLeft());
});
and some css
和一些 css
.box
{
width:400px;
height:80px;
background:gray;
position:fixed;
}
回答by jtyranski
Depending on a previous answer that helped me with what I was trying to do, keeping a header div with position-y fixed, a left div with position-x fixed, and a content div which would scroll on both x and y.
根据之前帮助我完成我尝试做的事情的答案,保持位置 y 固定的标题 div,位置 x 固定的左侧 div,以及将在 x 和 y 上滚动的内容 div。
Figured I would post my jsfiddle in case anyone finds it useful:
想我会发布我的 jsfiddle 以防万一有人觉得它有用:
The HTML
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>
The code
代码
$(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());
});
The CSS
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;
}