Table header to stay fixed at the top when user scrolls it out of view with jQuery

by

You would do something like this by tapping into the scroll event handler on window, and using another table with a fixed position to show the header at the top of the page.

HTML:

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

CSS:

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

JavaScript:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-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();
    }
});

This will show the table head when the user scrolls down far enough to hide the original table head. It will hide again when the user has scrolled the page up far enough again.

Working example: http://jsfiddle.net/andrewwhitaker/fj8wM/

More Related Contents:

  1. Hide/Show Column in a HTML Table
  2. Convert a HTML table data into a JSON object in jQuery
  3. Resizable table columns with jQuery [closed]
  4. How to retrieve checkboxes values in jQuery
  5. Auto-scaling input[type=text] to width of value?
  6. Randomize a sequence of div elements with jQuery
  7. Find text string in jQuery and make it bold
  8. jquery – Click event not working for dynamically created button [duplicate]
  9. Ajax in Jquery does not work from local file
  10. Hide Twitter Bootstrap nav collapse on click
  11. Adding data attribute to DOM
  12. How can I show and hide elements based on selected option with jQuery?
  13. jQuery Scroll to Div
  14. expand/collapse table rows with JQuery
  15. How to stay on current window when the link opens in new tab?
  16. How can I display a tooltip on an HTML “option” tag?
  17. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery [closed]
  18. jQuery get the id/value of element after click function
  19. Removing file from multiple files uploader on button click when using HTML5 file input
  20. Creating a hole in a element
  21. CORS request – why are the cookies not sent?
  22. How can I change HTML attribute names with jQuery?
  23. jquery can’t get data attribute value
  24. Animate counter when in viewport
  25. How add spaces between Slick carousel item
  26. Datatables warning(table id = ‘example’): cannot reinitialise data table
  27. jQuery web page height
  28. jQuery: find input field closest to button
  29. jQuery toggle class
  30. How do I select an element with special characters in the ID?

Leave a Comment