Geek Answers Handbook

Position: fixed and absolute at the same time. AS?

I want to create an Element that is very thin and very tall. I want the item to be visible all the time, even if you scroll to the right. This should be the position: fixed on the right and left, but it should scroll down and up. I searched on Google but could not find a suitable way to solve the problem. I just found this site: http://demo.rickyh.co.uk/css-position-x-and-position-y/ This is exactly what I want to have, BUT I use jQuery and not MooTools. I am looking for the same function in jQuery. I do not want to use 2 Framework. Does anyone know any help? Something? I watched for several hours, but I can not find something that fits my jQuery needs.

+7
source share
2 answers

Here is the solution with 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>

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; }
+17
source

Depending on the previous answer, which helped me in what I was trying to do, keeping the div header with a fixed position-y, a left div with a fixed position-x and the contents of the div, which will scroll on both x and y.

I realized that I will write my jsfiddle in case anyone finds it useful:

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>

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

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
source

More articles:


All Articles