Table row must stay fixed on the top when scrolling down the page

Question

I would like that <tr> with id="row" stays on top of page, when and only if I scroll page down and falls out of viewed page. If table heading is viewed on page, this table row it's on his place not on top of page. I have table:

<table id="table"> <thead> <tr> <th>heading of table</th> </tr> </thead> <tbody> <tr id="row"> <td colspan=3>Search box</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td>info</td> </tr> </tbody>

<table id="row-fixed"></table>

This is what i've done so far, but it's not working:

var tableOffset = $("#table").offset().top; var $header = $("#table > row").clone(); var $fixedHeader = $("#row-fixed").append($header); $(window).bind("scroll", function() { var offset = $(this).scrollTop(); if (offset >= tableOffset && $fixedHeader.is(":hidden")) { $fixedHeader.show(); } else if (offset < tableOffset) { $fixedHeader.hide(); } });

What should I change in this code, that would work for <tr id="row">

Here is a working case: http://jsfiddle.net/fj8wM/4489/

fjeldseth · Accepted Answer · 2015-04-23 10:38:20Z

var $header = $("#table > row").clone();

Your selector is invalid, you are missing the id hashtag. It should be $("#row").clone();

AmmarCSE · Accepted Answer · 2015-04-23 10:43:18Z

First, don't have the search box in a row. Extract it out of the table to its own element

<div id="row"> Search box </div>

Then, apply position:fixed to it and margin-top to the table

#row { position: fixed; top: 0px; } #table { margin-top:25px; }

Finally, there is no need to use javascript/jQuery for this.

Check out this fiddle

Collectives™ on Stack Overflow

Table row must stay fixed on the top when scrolling down the page

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related