Menu
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.
444
Absolutely positioned elements are positioned with respect to a containing block, which is the nearest postioned ancestor. If there is no positioned ancestor, the viewport will be the containing block. Elements with fixed positioning are fixed with respect to the viewport—the viewport is always their containing block.
It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width. A note about CSS positioning. Element is always positioned relative to the screen. Element is positioned relative to the nearest parent container with a position attribute.
position: relative places an element relative to its current position without changing the layout around it, whereas position: absolute places an element relative to its parent's position and changing the layout around it.
It is possible to position an element with fixed position relative to its container if the container is using certain containment rules.
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;
}
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
