ansaurus

Question

Simulate position:fixed in jQuery

Answer 1

A:

you could create a wrapper div and then specify a width on the div

eg width: 150%; or width; 2000px;

depending on your requirements

why do you need to scroll?

Hailwood 2010-07-07 08:00:53

This 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 2010-07-07 08:08:16

Unfortunately 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 2010-07-07 08:16:05

Take a look at http://jsbin.com/eyuya/3 , you see the issue?

Michael Lumbroso 2010-07-07 08:29:49

i 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 thishttp://jsbin.com/eyuya/4

Hailwood 2010-07-07 09:56:13

Thanks 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.

Michael Lumbroso 2010-07-07 10:38:54

yes, unfortunatially firefox's javascript engine lags a bit on returning the scroll event, which is why it appears to jump.

Hailwood 2010-07-07 21:39:28

Answer 2

+3 A:

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"&gt;&lt;/script&gt;
  <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>

jerjer 2010-07-07 08:30:20

Nice 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 ;)

Michael Lumbroso 2010-07-07 08:36:08

Well it's weird it doesn't seem to do the trick with FF : see http://jsbin.com/awawa3Have you got an explaination? Thanks

Michael Lumbroso 2010-07-07 10:37:18

it is working on my end, I am using FF 3.6

jerjer 2010-07-13 12:57:54

The 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.

Michael Lumbroso 2010-07-15 07:24:49

Answer 3

A:

http://fixedheadertable.com/demo/multipletablesdemo.html

try this one instead :)

Hailwood 2010-07-08 04:08:48

Hey, 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 2010-07-08 08:11:34

Answer 4

+3 A:

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:

http://jsbin.com/efuya3

David 2010-07-19 11:07:29

Works perfectly, thank you so much :)

Michael Lumbroso 2010-07-21 08:04:06

ansaurus

tags:

views:

answers:

Simulate position:fixed in jQuery

related questions