Simulate position:fixed in jQuery
Solution 1
You can wrap the element with a static positioned DIV to get scrollbars and then listen for the window scroll and position the fixed header according to the scrollLeft
value:
var elem = $('#headertable');
var win = $(window);
var wrap = $('<div>').css({
width: elem.width(),
height: elem.height()
});
elem.wrap(wrap);
win.scroll(function() {
elem.css('left', win.scrollLeft()*-1);
});
Seems to work in IE/FF/Chrome:
Solution 2
You can create a dummy visibililty:hidden element with the same width as that of the position:fixed element. Here is a sample:
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.4.2");
google.setOnLoadCallback(function() {
$(document).ready(function(){
var dummy = $('<div>dummy</div>').width( $('#header').width() + 'px').css('visibility','hidden');
$('body').append(dummy);
});
});
</script>
</head>
<body>
<div id="header" style="width:2000px;background:red;position:fixed;top:0;height:20px;">
This is aheder with fixed position
</div>
<div style="height:1200px;background:green;">
</div>
</body>
</html>
Solution 3
http://fixedheadertable.com/demo/multipletablesdemo.html
try this one instead :)
Michael Lumbroso
Updated on June 04, 2022Comments
-
Michael Lumbroso almost 2 years
I have a header that is larger than the width of the page so that I can't use
position:fixed
to set him on top of the page, because I absolutely need to be able to scroll horizontally. I don't think there is a CSS solution for this.I made a sample of code to try to reproduce the effect of
position:fixed
, but there are undesired jumps. My code is as following :$(window).scroll(function() { var y = $(window).scrollTop(); $("#headertable").css('top', y+175); });
Is there a way to make it really attached, like
position:fixed
? (Curiously, it is better displayed right now in IE than in FF, because it doesn't have this "jump" effect)Please find an example here: http://jsbin.com/eyuya/7. The first table is with
position:fixed
, the other uses my code. That is the jumping effect I'm trying to avoid if there is a solution.Edit:
Still haven't found a satisfying solution, I think I will use this in the end, because the site is meant to be used on IE and it doesn't seem like a miracle solution exists to attach a div to the viewport, and be able to scroll horizontally. I'm starting a bounty in case of somebody ran into this problem before and found a good solution.
Thanks for the people who already tried to answer this not as simple as it looks problem ;)
-
Unicron almost 14 yearsI don't understand what you are trying to do. Can you explain more?
-
Michael Lumbroso almost 14 yearsI would like to have position:fixed but only vertical, that is to say I need to scroll horizontally which is not allowed by position :fixed
-
-
Michael Lumbroso almost 14 yearsThis is my thead which is position :fixed. This is a table with 20 columns, I have the ability to hide some, but when I need to view the entire I need to scroll horizontally and see all the column titles. I'm testing your solution and I get back to you.
-
Michael Lumbroso almost 14 yearsUnfortunately it doesn't work, setting a width to a position:fixed element doesn't allow horizontal scroll, I'll try to make an example to show exactly what I have now and what bothers me with my solution. Thanks for the answser anyway ;)
-
Michael Lumbroso almost 14 yearsNice this looks like exactly what I need, I'm testing it, and will accept if it's ok. Thanks so much, I've been looking all over the internet for a decent solution, but only the best website for programmers can provide the right and the best answers ;)
-
Hailwood almost 14 yearsi may be wrong, but, you want the header to be fixed at the top of the page, but when you scroll left/right it should just scroll so you can see other columns? i may be wrong but try this jsbin.com/eyuya/4
-
Michael Lumbroso almost 14 yearsWell it's weird it doesn't seem to do the trick with FF : see jsbin.com/awawa3 Have you got an explaination? Thanks
-
Michael Lumbroso almost 14 yearsThanks for your answer, well it seems like it only works with IE, I don't know why. If it was compatible with FF it would be perfect.
-
Hailwood almost 14 yearsyes, unfortunatially firefox's javascript engine lags a bit on returning the scroll event, which is why it appears to jump.
-
Michael Lumbroso almost 14 yearsHey, thanks for the advice but I ve already seen this one, ans it doesn't quite fit my expectations as the scrollbar is on the body, and I need to scroll with the right bar, because I already don't have a lot of space for displaying all the columns. I think I'll implement your previous solution or jerjer one, because it is a company software, so they won't change from Internet Explorer in a while unfortunately :s
-
Michael Lumbroso almost 14 yearsThe link I provided works on FF 3.6 for you? It's weird, I also have this and if I scroll horizontally, it has the same behaviour as simple position:fixed . In IE7/8 it's even worse cause it has the same behaviour as position:absolute. Don't know what could be the problem.
-
Ben about 12 yearsI needed this solution to work with a header that's width was set to 100%, with a min-width set. With as is, issues would occur when the window was refreshed above the min-width then resized down as the wrap would be too large, causing a white gap to the right of the page when scrolled. To fix this, I edited your jsbin with my example: jsbin.com/efuya3/17 I hope this helps someone else who may stumble upon this gem. Thanks !