position: fixed and absolute at the same time. HOW?

javascript jquery html jquery-plugins

20,392

Solution 1

Here's a solution with jquery

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

Solution 2

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.

Figured I would post my jsfiddle in case anyone finds it useful:

My jsfiddle demo

The 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

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

20,392

Author by

Mischka

Updated on July 09, 2022

Comments

Mischka almost 2 years

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.