位置：同时固定和绝对。怎么样？ [英] position: fixed and absolute at the same time. HOW?

问题描述

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

解决方案

与jquery

jsfiddle演示

html

 < div style =width：1000px; height：1000px; > 
< div id =box1class =boxstyle =left：20px; top：20px;> 
我的位置x是固定的，但位置y是绝对的。 
< / div> 
< div id =box2class =boxstyle =left：20px; top：120px;> 
我的位置-x是绝对的，但是位置-y是固定的。 
< / div> 
< div id =box3class =boxstyle =left：20px; top：220px;> 
 Im定位固定在两个轴上。 
< / 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; 
背景：灰色; 
位置：固定; 
} 
  

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.

解决方案

Here's a solution with jquery

jsfiddle demo

the 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

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

这篇关于位置：同时固定和绝对。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！