Stcking the content of div in page

Hi,

I have given the link to the code.

The original link: http://jsfiddle.net/jmosbech/stFcx/

i want the div above the table( i am the header) also to stick to the page when table scrolling happens.
The table scrolling is using stickyTableHeaders plugin. The table appears inside div container.

tried using a plugin called .pin(); but it did not work.
i tried giving Position:fixed; but that spoiled the alignment. i cannot touch it as it will affect global template.

here goes one more example link.
http://css-tricks.com/examples/PersistantHeaders/

i want the persister headers above the table to stay, stick to the page, when scrolling of the table happens.

https://github.com/dubroe/sticky-div i saw this JS file. i tried using it but did not work.
if this could be used, how ?

Appreciate it if i get an working example.

Thanks.

Hi there,

Welcome to the forums :slight_smile:

You don’t need jQuery to achieve a sticky header, just use the following CSS:

.fixedElement{
  background-color: #fff;
  position:fixed;
  margin:0;
  padding:15px 0;
  top:0;
  width:100%;
  z-index:100;
}

And then initialize the plugin with an offset, like this:

$("table").stickyTableHeaders({fixedOffset: 55});

Here’s a demo.

And here’s the code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fixed header example</title>
    <style>
      body{
      margin: 0 auto;
      padding: 0 20px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #555;
      }

      table{
      border: 0;
      padding: 0;
      margin: 0 0 20px 0;
      border-collapse: collapse;
      }

      th{
      padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
      text-align: right;
      font-weight:bold;
      line-height: 2em;
      color: #FFF;
      background-color: #555;
      }

      tbody td{
      padding: 10px;
      line-height: 18px;
      border-top: 1px solid #E0E0E0;
      }

      tbody tr:nth-child(2n){
      background-color: #F7F7F7;
      }

      tbody tr:hover{
      background-color: #EEEEEE;
      }

      td{ text-align: right; }

      td:first-child, th:first-child{ text-align: left; }

      .fixedElement{
        background-color: #fff;
        position:fixed;
        margin:0;
        padding:15px 0;
        top:0;
        width:100%;
        z-index:100;
      }

      #wrapper{ width: 600px; }
      .first{ margin-top:55px; }
      .last{ margin-bottom: 25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="wrapper">
       <h1 class="fixedElement">I am the header</h1>

       <p class="first">
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p class="last">
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>

        <table>
        <thead>
        <tr>
        <th colspan="9">
        Companies listed on NASDAQ OMX Copenhagen.
        </th>
        </tr>
        <tr>
        <th>
        Full name
        </th>
        <th>
        CCY
        </th>
        <th>
        Last
        </th>
        <th>
        +/-
        </th>
        <th>
        %
        </th>
        <th>
        Bid
        </th>
        <th>
        Ask
        </th>
        <th>
        Volume
        </th>
        <th>
        Turnover
        </th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>
        A.P. Møller...
        </td>
        <td>
        DKK
        </td>
        <td>
        33,220.00
        </td>
        <td>
        760
        </td>
        <td>
        2.34
        </td>
        <td>
        33,140.00
        </td>
        <td>
        33,220.00
        </td>
        <td>
        594
        </td>
        <td>
        19,791,910
        </td>
        </tr>
        <tr>
        <td>
        A.P. Møller...
        </td>
        <td>
        DKK
        </td>
        <td>
        34,620.00
        </td>
        <td>
        640
        </td>
        <td>
        1.88
        </td>
        <td>
        34,620.00
        </td>
        <td>
        34,700.00
        </td>
        <td>
        9,954
        </td>
        <td>
        346,530,246
        </td>
        </tr>
        <tr>
        <td>
        Carlsberg A
        </td>
        <td>
        DKK
        </td>
        <td>
        380
        </td>
        <td>
        0
        </td>
        <td>
        0
        </td>
        <td>
        371
        </td>
        <td>
        391.5
        </td>
        <td>
        6
        </td>
        <td>
        2,280
        </td>
        </tr>
        <tr>
        <td>
        Carlsberg B
        </td>
        <td>
        DKK
        </td>
        <td>
        364.4
        </td>
        <td>
        8.6
        </td>
        <td>
        2.42
        </td>
        <td>
        363
        </td>
        <td>
        364.4
        </td>
        <td>
        636,267
        </td>
        <td>
        228,530,601
        </td>
        </tr>
        <tr>
        <td>
        Chr. Hansen...
        </td>
        <td>
        DKK
        </td>
        <td>
        114.5
        </td>
        <td>
        -1.6
        </td>
        <td>
        -1.38
        </td>
        <td>
        114.2
        </td>
        <td>
        114.5
        </td>
        <td>
        141,822
        </td>
        <td>
        16,311,454
        </td>
        </tr>
        <tr>
        <td>
        Coloplast B
        </td>
        <td>
        DKK
        </td>
        <td>
        809.5
        </td>
        <td>
        11
        </td>
        <td>
        1.38
        </td>
        <td>
        809
        </td>
        <td>
        809.5
        </td>
        <td>
        85,840
        </td>
        <td>
        69,363,301
        </td>
        </tr>
        <tr>
        <td>
        D/S Norden
        </td>
        <td>
        DKK
        </td>
        <td>
        155
        </td>
        <td>
        -1.5
        </td>
        <td>
        -0.96
        </td>
        <td>
        155
        </td>
        <td>
        155.1
        </td>
        <td>
        51,681
        </td>
        <td>
        8,037,225
        </td>
        </tr>
        <tr>
        <td>
        Danske Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        69.05
        </td>
        <td>
        2.55
        </td>
        <td>
        3.83
        </td>
        <td>
        69.05
        </td>
        <td>
        69.2
        </td>
        <td>
        1,723,719
        </td>
        <td>
        115,348,068
        </td>
        </tr>
        <tr>
        <td>
        DSV
        </td>
        <td>
        DKK
        </td>
        <td>
        105.4
        </td>
        <td>
        0.2
        </td>
        <td>
        0.19
        </td>
        <td>
        105.2
        </td>
        <td>
        105.4
        </td>
        <td>
        674,873
        </td>
        <td>
        71,575,035
        </td>
        </tr>
        <tr>
        <td>
        FLSmidth &amp; Co.
        </td>
        <td>
        DKK
        </td>
        <td>
        295.8
        </td>
        <td>
        -1.8
        </td>
        <td>
        -0.6
        </td>
        <td>
        295.1
        </td>
        <td>
        295.8
        </td>
        <td>
        341,263
        </td>
        <td>
        100,301,032
        </td>
        </tr>
        <tr>
        <td>
        G4S plc
        </td>
        <td>
        DKK
        </td>
        <td>
        22.53
        </td>
        <td>
        0.05
        </td>
        <td>
        0.22
        </td>
        <td>
        22.53
        </td>
        <td>
        22.57
        </td>
        <td>
        190,920
        </td>
        <td>
        4,338,150
        </td>
        </tr>
        <tr>
        <td>
        Jyske Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        144.2
        </td>
        <td>
        1.4
        </td>
        <td>
        0.98
        </td>
        <td>
        142.8
        </td>
        <td>
        144.2
        </td>
        <td>
        78,163
        </td>
        <td>
        11,104,874
        </td>
        </tr>
        <tr>
        <td>
        Københavns ...
        </td>
        <td>
        DKK
        </td>
        <td>
        1,580.00
        </td>
        <td>
        -12
        </td>
        <td>
        -0.75
        </td>
        <td>
        1,590.00
        </td>
        <td>
        1,620.00
        </td>
        <td>
        82
        </td>
        <td>
        131,110
        </td>
        </tr>
        <tr>
        <td>
        Lundbeck
        </td>
        <td>
        DKK
        </td>
        <td>
        103.4
        </td>
        <td>
        -2.5
        </td>
        <td>
        -2.36
        </td>
        <td>
        103.4
        </td>
        <td>
        103.8
        </td>
        <td>
        157,162
        </td>
        <td>
        16,462,282
        </td>
        </tr>
        <tr>
        <td>
        Nordea Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        43.22
        </td>
        <td>
        -0.06
        </td>
        <td>
        -0.14
        </td>
        <td>
        43.22
        </td>
        <td>
        43.25
        </td>
        <td>
        167,520
        </td>
        <td>
        7,310,143
        </td>
        </tr>
        <tr>
        <td>
        Novo Nordisk B
        </td>
        <td>
        DKK
        </td>
        <td>
        552.5
        </td>
        <td>
        -3.5
        </td>
        <td>
        -0.63
        </td>
        <td>
        550.5
        </td>
        <td>
        552.5
        </td>
        <td>
        843,533
        </td>
        <td>
        463,962,375
        </td>
        </tr>
        <tr>
        <td>
        Novozymes B
        </td>
        <td>
        DKK
        </td>
        <td>
        805.5
        </td>
        <td>
        5.5
        </td>
        <td>
        0.69
        </td>
        <td>
        805
        </td>
        <td>
        805.5
        </td>
        <td>
        152,188
        </td>
        <td>
        121,746,199
        </td>
        </tr>
        <tr>
        <td>
        Pandora
        </td>
        <td>
        DKK
        </td>
        <td>
        39.04
        </td>
        <td>
        0.94
        </td>
        <td>
        2.47
        </td>
        <td>
        38.8
        </td>
        <td>
        39.04
        </td>
        <td>
        350,965
        </td>
        <td>
        13,611,838
        </td>
        </tr>
        <tr>
        <td>
        Rockwool In...
        </td>
        <td>
        DKK
        </td>
        <td>
        492
        </td>
        <td>
        0
        </td>
        <td>
        0
        </td>
        <td>
        482
        </td>
        <td>
        492
        </td>
        <td></td>
        <td></td>
        </tr>
        <tr>
        <td>
        Rockwool In...
        </td>
        <td>
        DKK
        </td>
        <td>
        468
        </td>
        <td>
        12
        </td>
        <td>
        2.63
        </td>
        <td>
        465.2
        </td>
        <td>
        468
        </td>
        <td>
        9,885
        </td>
        <td>
        4,623,850
        </td>
        </tr>
        <tr>
        <td>
        Sydbank
        </td>
        <td>
        DKK
        </td>
        <td>
        95
        </td>
        <td>
        0.05
        </td>
        <td>
        0.05
        </td>
        <td>
        94.7
        </td>
        <td>
        95
        </td>
        <td>
        103,438
        </td>
        <td>
        9,802,899
        </td>
        </tr>
        <tr>
        <td>
        TDC
        </td>
        <td>
        DKK
        </td>
        <td>
        43.6
        </td>
        <td>
        0.13
        </td>
        <td>
        0.3
        </td>
        <td>
        43.5
        </td>
        <td>
        43.6
        </td>
        <td>
        845,110
        </td>
        <td>
        36,785,339
        </td>
        </tr>
        <tr>
        <td>
        Topdanmark
        </td>
        <td>
        DKK
        </td>
        <td>
        854
        </td>
        <td>
        13.5
        </td>
        <td>
        1.61
        </td>
        <td>
        854
        </td>
        <td>
        855
        </td>
        <td>
        38,679
        </td>
        <td>
        32,737,678
        </td>
        </tr>
        <tr>
        <td>
        Tryg
        </td>
        <td>
        DKK
        </td>
        <td>
        290.4
        </td>
        <td>
        0.3
        </td>
        <td>
        0.1
        </td>
        <td>
        290
        </td>
        <td>
        290.4
        </td>
        <td>
        94,587
        </td>
        <td>
        27,537,247
        </td>
        </tr>
        <tr>
        <td>
        Vestas Wind...
        </td>
        <td>
        DKK
        </td>
        <td>
        90.15
        </td>
        <td>
        -4.2
        </td>
        <td>
        -4.45
        </td>
        <td>
        90.1
        </td>
        <td>
        90.15
        </td>
        <td>
        1,317,313
        </td>
        <td>
        121,064,314
        </td>
        </tr>
        <tr>
        <td>
        William Dem...
        </td>
        <td>
        DKK
        </td>
        <td>
        417.6
        </td>
        <td>
        0.1
        </td>
        <td>
        0.02
        </td>
        <td>
        417
        </td>
        <td>
        417.6
        </td>
        <td>
        64,242
        </td>
        <td>
        26,859,554
        </td>
        </tr>
        </tbody>
        </table>

        <div style="height: 4000px">
           lots of content down here...
        </div>
      </div>
    <script>
      $(function(){
        $("table").stickyTableHeaders({fixedOffset: 55});
      });

      /*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
      MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */

      ;(function ($, window, undefined) {
      'use strict';

      var name = 'stickyTableHeaders';
      var defaults = {
        fixedOffset: 0
      };

      function Plugin (el, options) {
      // To avoid scope issues, use 'base' instead of 'this'
      // to reference this class from internal events and functions.
      var base = this;

      // Access to jQuery and DOM versions of element
      base.$el = $(el);
      base.el = el;

      // Listen for destroyed, call teardown
      base.$el.bind('destroyed',
        $.proxy(base.teardown, base));

      // Cache DOM refs for performance reasons
      base.$window = $(window);
      base.$clonedHeader = null;
      base.$originalHeader = null;

      // Keep track of state
      base.isCloneVisible = false;
      base.leftOffset = null;
      base.topOffset = null;

      base.init = function () {
        base.options = $.extend({}, defaults, options);

        base.$el.each(function () {
          var $this = $(this);

          // remove padding on <table> to fix issue #7
          $this.css('padding', 0);

          base.$originalHeader = $('thead:first', this);
          base.$clonedHeader = base.$originalHeader.clone();

          base.$clonedHeader.addClass('tableFloatingHeader');
          base.$clonedHeader.css({
            'position': 'fixed',
            'top': 0,
            'z-index': 1, // #18: opacity bug
            'display': 'none'
          });

          base.$originalHeader.addClass('tableFloatingHeaderOriginal');

          base.$originalHeader.after(base.$clonedHeader);

          // enabling support for jquery.tablesorter plugin
          // forward clicks on clone to original
          $('th', base.$clonedHeader).on('click.' + name, function (e) {
            var index = $('th', base.$clonedHeader).index(this);
            $('th', base.$originalHeader).eq(index).click();
          });
          $this.on('sortEnd.' + name, base.updateWidth);

          base.$printStyle = $('<style type="text/css" media="print">' +
            '.tableFloatingHeader{display:none !important;}' +
            '.tableFloatingHeaderOriginal{visibility:visible !important;}' +
            '</style>');
          $('head').append(base.$printStyle);
        });

        base.updateWidth();
        base.toggleHeaders();

        base.bind();
      };

      base.destroy = function (){
        base.$el.unbind('destroyed', base.teardown);
        base.teardown();
      };

      base.teardown = function(){
        $.removeData(base.el, 'plugin_' + name);
        base.unbind();

        base.$clonedHeader.remove();
        base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
        base.$originalHeader.css('visibility', 'visible');
        base.$printStyle.remove();

        base.el = null;
        base.$el = null;
      };

      base.bind = function(){
        base.$window.on('scroll.' + name, base.toggleHeaders);
        base.$window.on('resize.' + name, base.toggleHeaders);
        base.$window.on('resize.' + name, base.updateWidth);
        // TODO: move tablesorter bindings here
      };

      base.unbind = function(){
        // unbind window events by specifying handle so we don't remove too much
        base.$window.off('.' + name, base.toggleHeaders);
        base.$window.off('.' + name, base.updateWidth);
        base.$el.off('.' + name);
        base.$el.find('*').off('.' + name);
      };

      base.toggleHeaders = function () {
        base.$el.each(function () {
          var $this = $(this);

          var newTopOffset = isNaN(base.options.fixedOffset) ?
            base.options.fixedOffset.height() : base.options.fixedOffset;

          var offset = $this.offset();
          var scrollTop = base.$window.scrollTop() + newTopOffset;
          var scrollLeft = base.$window.scrollLeft();

          if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
            var newLeft = offset.left - scrollLeft;
            if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
              return;
            }

            base.$clonedHeader.css({
              'top': newTopOffset,
              'margin-top': 0,
              'left': newLeft,
              'display': 'block'
            });
            base.$originalHeader.css('visibility', 'hidden');
            base.isCloneVisible = true;
            base.leftOffset = newLeft;
            base.topOffset = newTopOffset;
          }
          else if (base.isCloneVisible) {
            base.$clonedHeader.css('display', 'none');
            base.$originalHeader.css('visibility', 'visible');
            base.isCloneVisible = false;
          }
        });
      };

      base.updateWidth = function () {
        // Copy cell widths and classes from original header
        $('th', base.$clonedHeader).each(function (index) {
          var $this = $(this);
          var $origCell = $('th', base.$originalHeader).eq(index);
          this.className = $origCell.attr('class') || '';
          // use min/max-width to fix overflow issue (#30)
          $this.css({
            'min-width': $origCell.width(),
            'max-width': $origCell.width()
          });
        });

        // Copy row width from whole table
        base.$clonedHeader.css('width', base.$originalHeader.width());
      };

      // Run initializer
      base.init();
      }

      // A plugin wrapper around the constructor,
      // preventing against multiple instantiations
      $.fn[name] = function ( options ) {
      return this.each(function () {
        var instance = $.data(this, 'plugin_' + name);
        if (instance) {
          if (typeof options === "string") {
            instance[options].apply(instance);
          }
        } else if(options !== 'destroy') {
          $.data(this, 'plugin_' + name, new Plugin( this, options ));
        }
      });
      };

      })(jQuery, window);
    </script>
  </body>
</html>

Hope that helps.

Thanks for the welcome :slight_smile:
Thanks for the solution. Appreciate it.

But if i want even the paragraph tag (the content of paragraph)to show along with the header, then what would be the properties?

Thanks.

Hi,

Just so I understand: you’re asking me to explain what I did and show you how to adjust things, so that you can “sticky” other elements, as well as the header.
Is that correct?

Hi,

posted is the code below to male header and paragraph stick to page from your code.


<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Fixed header example</title>
    <style>
      body{
      margin: 0 auto;
      padding: 0 20px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      color: #555;
      }
      
      table{
      border: 0;
      padding: 0;
      margin: 0 0 20px 0;
      border-collapse: collapse;
      }
      
      th{
      padding: 5px; /* NOTE: th padding must be set explicitly in order to support IE */
      text-align: right;        
      font-weight:bold;
      line-height: 2em;
      color: #FFF;
      background-color: #555;
      }
      
      tbody td{
      padding: 10px;
      line-height: 18px;
      border-top: 1px solid #E0E0E0;
      }
      
      tbody tr:nth-child(2n){
      background-color: #F7F7F7;
      }
      
      tbody tr:hover{
      background-color: #EEEEEE;
      }
      
      td{ text-align: right; }
      
      td:first-child, th:first-child{ text-align: left; }
      
      .fixedElement{
        background-color: #fff;
        position:fixed;
        margin:0;
        padding:15px 0;
        top:0;
        width:100%;
        z-index:100;
      }
      
      #wrapper{ width: 600px; }
      .first{ margin-top:55px; width:600px; }
      .last{ margin-bottom: 25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div id="wrapper">
       <h1 class="fixedElement">I am the header</h1>
  
       <p class="first fixedElement">
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p>
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
       <p class="last">
         the paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph tagthe paragraph 
        tagthe paragraph tagthe paragraph tagthe paragraph tag
       </p>
    
        <table>
        <thead>
        <tr>
        <th colspan="9">
        Companies listed on NASDAQ OMX Copenhagen.
        </th>
        </tr>
        <tr>
        <th>
        Full name
        </th>
        <th>
        CCY
        </th>
        <th>
        Last
        </th>
        <th>
        +/-
        </th>
        <th>
        %
        </th>
        <th>
        Bid
        </th>
        <th>
        Ask
        </th>
        <th>
        Volume
        </th>
        <th>
        Turnover
        </th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>
        A.P. Møller...
        </td>
        <td>
        DKK
        </td>
        <td>
        33,220.00
        </td>
        <td>
        760
        </td>
        <td>
        2.34
        </td>
        <td>
        33,140.00
        </td>
        <td>
        33,220.00
        </td>
        <td>
        594
        </td>
        <td>
        19,791,910
        </td>
        </tr>
        <tr>
        <td>
        A.P. Møller...
        </td>
        <td>
        DKK
        </td>
        <td>
        34,620.00
        </td>
        <td>
        640
        </td>
        <td>
        1.88
        </td>
        <td>
        34,620.00
        </td>
        <td>
        34,700.00
        </td>
        <td>
        9,954
        </td>
        <td>
        346,530,246
        </td>
        </tr>
        <tr>
        <td>
        Carlsberg A
        </td>
        <td>
        DKK
        </td>
        <td>
        380
        </td>
        <td>
        0
        </td>
        <td>
        0
        </td>
        <td>
        371
        </td>
        <td>
        391.5
        </td>
        <td>
        6
        </td>
        <td>
        2,280
        </td>
        </tr>
        <tr>
        <td>
        Carlsberg B
        </td>
        <td>
        DKK
        </td>
        <td>
        364.4
        </td>
        <td>
        8.6
        </td>
        <td>
        2.42
        </td>
        <td>
        363
        </td>
        <td>
        364.4
        </td>
        <td>
        636,267
        </td>
        <td>
        228,530,601
        </td>
        </tr>
        <tr>
        <td>
        Chr. Hansen...
        </td>
        <td>
        DKK
        </td>
        <td>
        114.5
        </td>
        <td>
        -1.6
        </td>
        <td>
        -1.38
        </td>
        <td>
        114.2
        </td>
        <td>
        114.5
        </td>
        <td>
        141,822
        </td>
        <td>
        16,311,454
        </td>
        </tr>
        <tr>
        <td>
        Coloplast B
        </td>
        <td>
        DKK
        </td>
        <td>
        809.5
        </td>
        <td>
        11
        </td>
        <td>
        1.38
        </td>
        <td>
        809
        </td>
        <td>
        809.5
        </td>
        <td>
        85,840
        </td>
        <td>
        69,363,301
        </td>
        </tr>
        <tr>
        <td>
        D/S Norden
        </td>
        <td>
        DKK
        </td>
        <td>
        155
        </td>
        <td>
        -1.5
        </td>
        <td>
        -0.96
        </td>
        <td>
        155
        </td>
        <td>
        155.1
        </td>
        <td>
        51,681
        </td>
        <td>
        8,037,225
        </td>
        </tr>
        <tr>
        <td>
        Danske Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        69.05
        </td>
        <td>
        2.55
        </td>
        <td>
        3.83
        </td>
        <td>
        69.05
        </td>
        <td>
        69.2
        </td>
        <td>
        1,723,719
        </td>
        <td>
        115,348,068
        </td>
        </tr>
        <tr>
        <td>
        DSV
        </td>
        <td>
        DKK
        </td>
        <td>
        105.4
        </td>
        <td>
        0.2
        </td>
        <td>
        0.19
        </td>
        <td>
        105.2
        </td>
        <td>
        105.4
        </td>
        <td>
        674,873
        </td>
        <td>
        71,575,035
        </td>
        </tr>
        <tr>
        <td>
        FLSmidth &amp; Co.
        </td>
        <td>
        DKK
        </td>
        <td>
        295.8
        </td>
        <td>
        -1.8
        </td>
        <td>
        -0.6
        </td>
        <td>
        295.1
        </td>
        <td>
        295.8
        </td>
        <td>
        341,263
        </td>
        <td>
        100,301,032
        </td>
        </tr>
        <tr>
        <td>
        G4S plc
        </td>
        <td>
        DKK
        </td>
        <td>
        22.53
        </td>
        <td>
        0.05
        </td>
        <td>
        0.22
        </td>
        <td>
        22.53
        </td>
        <td>
        22.57
        </td>
        <td>
        190,920
        </td>
        <td>
        4,338,150
        </td>
        </tr>
        <tr>
        <td>
        Jyske Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        144.2
        </td>
        <td>
        1.4
        </td>
        <td>
        0.98
        </td>
        <td>
        142.8
        </td>
        <td>
        144.2
        </td>
        <td>
        78,163
        </td>
        <td>
        11,104,874
        </td>
        </tr>
        <tr>
        <td>
        Københavns ...
        </td>
        <td>
        DKK
        </td>
        <td>
        1,580.00
        </td>
        <td>
        -12
        </td>
        <td>
        -0.75
        </td>
        <td>
        1,590.00
        </td>
        <td>
        1,620.00
        </td>
        <td>
        82
        </td>
        <td>
        131,110
        </td>
        </tr>
        <tr>
        <td>
        Lundbeck
        </td>
        <td>
        DKK
        </td>
        <td>
        103.4
        </td>
        <td>
        -2.5
        </td>
        <td>
        -2.36
        </td>
        <td>
        103.4
        </td>
        <td>
        103.8
        </td>
        <td>
        157,162
        </td>
        <td>
        16,462,282
        </td>
        </tr>
        <tr>
        <td>
        Nordea Bank
        </td>
        <td>
        DKK
        </td>
        <td>
        43.22
        </td>
        <td>
        -0.06
        </td>
        <td>
        -0.14
        </td>
        <td>
        43.22
        </td>
        <td>
        43.25
        </td>
        <td>
        167,520
        </td>
        <td>
        7,310,143
        </td>
        </tr>
        <tr>
        <td>
        Novo Nordisk B
        </td>
        <td>
        DKK
        </td>
        <td>
        552.5
        </td>
        <td>
        -3.5
        </td>
        <td>
        -0.63
        </td>
        <td>
        550.5
        </td>
        <td>
        552.5
        </td>
        <td>
        843,533
        </td>
        <td>
        463,962,375
        </td>
        </tr>
        <tr>
        <td>
        Novozymes B
        </td>
        <td>
        DKK
        </td>
        <td>
        805.5
        </td>
        <td>
        5.5
        </td>
        <td>
        0.69
        </td>
        <td>
        805
        </td>
        <td>
        805.5
        </td>
        <td>
        152,188
        </td>
        <td>
        121,746,199
        </td>
        </tr>
        <tr>
        <td>
        Pandora
        </td>
        <td>
        DKK
        </td>
        <td>
        39.04
        </td>
        <td>
        0.94
        </td>
        <td>
        2.47
        </td>
        <td>
        38.8
        </td>
        <td>
        39.04
        </td>
        <td>
        350,965
        </td>
        <td>
        13,611,838
        </td>
        </tr>
        <tr>
        <td>
        Rockwool In...
        </td>
        <td>
        DKK
        </td>
        <td>
        492
        </td>
        <td>
        0
        </td>
        <td>
        0
        </td>
        <td>
        482
        </td>
        <td>
        492
        </td>
        <td></td>
        <td></td>
        </tr>
        <tr>
        <td>
        Rockwool In...
        </td>
        <td>
        DKK
        </td>
        <td>
        468
        </td>
        <td>
        12
        </td>
        <td>
        2.63
        </td>
        <td>
        465.2
        </td>
        <td>
        468
        </td>
        <td>
        9,885
        </td>
        <td>
        4,623,850
        </td>
        </tr>
        <tr>
        <td>
        Sydbank
        </td>
        <td>
        DKK
        </td>
        <td>
        95
        </td>
        <td>
        0.05
        </td>
        <td>
        0.05
        </td>
        <td>
        94.7
        </td>
        <td>
        95
        </td>
        <td>
        103,438
        </td>
        <td>
        9,802,899
        </td>
        </tr>
        <tr>
        <td>
        TDC
        </td>
        <td>
        DKK
        </td>
        <td>
        43.6
        </td>
        <td>
        0.13
        </td>
        <td>
        0.3
        </td>
        <td>
        43.5
        </td>
        <td>
        43.6
        </td>
        <td>
        845,110
        </td>
        <td>
        36,785,339
        </td>
        </tr>
        <tr>
        <td>
        Topdanmark
        </td>
        <td>
        DKK
        </td>
        <td>
        854
        </td>
        <td>
        13.5
        </td>
        <td>
        1.61
        </td>
        <td>
        854
        </td>
        <td>
        855
        </td>
        <td>
        38,679
        </td>
        <td>
        32,737,678
        </td>
        </tr>
        <tr>
        <td>
        Tryg
        </td>
        <td>
        DKK
        </td>
        <td>
        290.4
        </td>
        <td>
        0.3
        </td>
        <td>
        0.1
        </td>
        <td>
        290
        </td>
        <td>
        290.4
        </td>
        <td>
        94,587
        </td>
        <td>
        27,537,247
        </td>
        </tr>
        <tr>
        <td>
        Vestas Wind...
        </td>
        <td>
        DKK
        </td>
        <td>
        90.15
        </td>
        <td>
        -4.2
        </td>
        <td>
        -4.45
        </td>
        <td>
        90.1
        </td>
        <td>
        90.15
        </td>
        <td>
        1,317,313
        </td>
        <td>
        121,064,314
        </td>
        </tr>
        <tr>
        <td>
        William Dem...
        </td>
        <td>
        DKK
        </td>
        <td>
        417.6
        </td>
        <td>
        0.1
        </td>
        <td>
        0.02
        </td>
        <td>
        417
        </td>
        <td>
        417.6
        </td>
        <td>
        64,242
        </td>
        <td>
        26,859,554
        </td>
        </tr>
        </tbody>
        </table>
        
        <div style="height: 4000px">
           lots of content down here...
        </div>
      </div>
    <script>
      $(function(){
        $("table").stickyTableHeaders({fixedOffset: 55});
      });
      
      /*! Copyright (c) 2011 by Jonas Mosbech - https://github.com/jmosbech/StickyTableHeaders
      MIT license info: https://github.com/jmosbech/StickyTableHeaders/blob/master/license.txt */
      
      ;(function ($, window, undefined) {
      'use strict';
      
      var name = 'stickyTableHeaders';
      var defaults = {
        fixedOffset: 0
      };
      
      function Plugin (el, options) {
      // To avoid scope issues, use 'base' instead of 'this'
      // to reference this class from internal events and functions.
      var base = this;
      
      // Access to jQuery and DOM versions of element
      base.$el = $(el);
      base.el = el;
      
      // Listen for destroyed, call teardown
      base.$el.bind('destroyed',
        $.proxy(base.teardown, base));
      
      // Cache DOM refs for performance reasons
      base.$window = $(window);
      base.$clonedHeader = null;
      base.$originalHeader = null;
      
      // Keep track of state
      base.isCloneVisible = false;
      base.leftOffset = null;
      base.topOffset = null;
      
      base.init = function () {
        base.options = $.extend({}, defaults, options);
      
        base.$el.each(function () {
          var $this = $(this);
      
          // remove padding on <table> to fix issue #7
          $this.css('padding', 0);
      
          base.$originalHeader = $('thead:first', this);
          base.$clonedHeader = base.$originalHeader.clone();
      
          base.$clonedHeader.addClass('tableFloatingHeader');
          base.$clonedHeader.css({
            'position': 'fixed',
            'top': 0,
            'z-index': 1, // #18: opacity bug
            'display': 'none'
          });
      
          base.$originalHeader.addClass('tableFloatingHeaderOriginal');
      
          base.$originalHeader.after(base.$clonedHeader);
      
          // enabling support for jquery.tablesorter plugin
          // forward clicks on clone to original
          $('th', base.$clonedHeader).on('click.' + name, function (e) {
            var index = $('th', base.$clonedHeader).index(this);
            $('th', base.$originalHeader).eq(index).click();
          });
          $this.on('sortEnd.' + name, base.updateWidth);
      
          base.$printStyle = $('<style type="text/css" media="print">' +
            '.tableFloatingHeader{display:none !important;}' +
            '.tableFloatingHeaderOriginal{visibility:visible !important;}' +
            '</style>');
          $('head').append(base.$printStyle);
        });
      
        base.updateWidth();
        base.toggleHeaders();
      
        base.bind();
      };
      
      base.destroy = function (){
        base.$el.unbind('destroyed', base.teardown);
        base.teardown();
      };
      
      base.teardown = function(){
        $.removeData(base.el, 'plugin_' + name);
        base.unbind();
      
        base.$clonedHeader.remove();
        base.$originalHeader.removeClass('tableFloatingHeaderOriginal');
        base.$originalHeader.css('visibility', 'visible');
        base.$printStyle.remove();
      
        base.el = null;
        base.$el = null;
      };
      
      base.bind = function(){
        base.$window.on('scroll.' + name, base.toggleHeaders);
        base.$window.on('resize.' + name, base.toggleHeaders);
        base.$window.on('resize.' + name, base.updateWidth);
        // TODO: move tablesorter bindings here
      };
      
      base.unbind = function(){
        // unbind window events by specifying handle so we don't remove too much
        base.$window.off('.' + name, base.toggleHeaders);
        base.$window.off('.' + name, base.updateWidth);
        base.$el.off('.' + name);
        base.$el.find('*').off('.' + name);
      };
      
      base.toggleHeaders = function () {
        base.$el.each(function () {
          var $this = $(this);
      
          var newTopOffset = isNaN(base.options.fixedOffset) ?
            base.options.fixedOffset.height() : base.options.fixedOffset;
      
          var offset = $this.offset();
          var scrollTop = base.$window.scrollTop() + newTopOffset;
          var scrollLeft = base.$window.scrollLeft();
      
          if ((scrollTop > offset.top) && (scrollTop < offset.top + $this.height())) {
            var newLeft = offset.left - scrollLeft;
            if (base.isCloneVisible && (newLeft === base.leftOffset) && (newTopOffset === base.topOffset)) {
              return;
            }
      
            base.$clonedHeader.css({
              'top': newTopOffset,
              'margin-top': 0,
              'left': newLeft,
              'display': 'block'
            });
            base.$originalHeader.css('visibility', 'hidden');
            base.isCloneVisible = true;
            base.leftOffset = newLeft;
            base.topOffset = newTopOffset;
          }
          else if (base.isCloneVisible) {
            base.$clonedHeader.css('display', 'none');
            base.$originalHeader.css('visibility', 'visible');
            base.isCloneVisible = false;
          }
        });
      };
      
      base.updateWidth = function () {
        // Copy cell widths and classes from original header
        $('th', base.$clonedHeader).each(function (index) {
          var $this = $(this);
          var $origCell = $('th', base.$originalHeader).eq(index);
          this.className = $origCell.attr('class') || '';
          // use min/max-width to fix overflow issue (#30)
          $this.css({
            'min-width': $origCell.width(),
            'max-width': $origCell.width()
          });
        });
      
        // Copy row width from whole table
        base.$clonedHeader.css('width', base.$originalHeader.width());
      };
      
      // Run initializer
      base.init();
      }
      
      // A plugin wrapper around the constructor,
      // preventing against multiple instantiations
      $.fn[name] = function ( options ) {
      return this.each(function () {
        var instance = $.data(this, 'plugin_' + name);
        if (instance) {
          if (typeof options === "string") {
            instance[options].apply(instance);
          }
        } else if(options !== 'destroy') {
          $.data(this, 'plugin_' + name, new Plugin( this, options ));
        }
      });
      };
      
      })(jQuery, window);
    </script>    
  </body>
</html>

the above code will make the header and the first paragraph stick to the page along with table scrolling.

in the above link, if i call the fixedElement call at the top of the div…it sticks to the page…without any scroll. So, if i call CSS class at top of div, how it will stick and scrolling will take? anything to do with fixedOffset?
I already played a bit with the code , using CSS to stick the container to the page.but with least success. So, i thought JS would help.

an example would be great.

again, truly appreciate your efforts.

Thanks.

Hi,

I’m a little unsure what you’re trying to achieve here.
If you set the position of the containing div as fixed, then of course it will stick to the page and no scroll.

Are you trying to make the header and paragraph elements sticky?
Here’s a fiddle that does that.

Thanks. so, it’s fixedOffset coordinates change to 160. hmm…ok.

Thanks.

Yeah, the offset is amount of pixels (measured from the top of the screen), at which you want the table header to stick.

Hi,

i am reposting this again.

all classes take the position of relative. so when i give it fixedElement. it just stops there and no scrolling takes place.

i have posted a link here with just html.

I have dropped the plugin. now i need to scroll just the table body alone. and rest of the things should stick to page. the header, the content and the table header<thead>.
I am writing the code for in JS against the window scroll as CSS alone will not help. I don’t want to give my solution. Do you think there can be any other solution to achieve this.

i found this link http://jsfiddle.net/livibetter/HV9HM/ to be useful.
http://jsfiddle.net/HQS8s/ this link also to be useful.

Let me know your thoughts.

thanks.

Hi,

The links you posted use the same method as I did, namely applying a style of position: fixed to the elements to keep them in place.
If my previous solution is not acceptable, I would use one of those methods to sticky content at the top of the page, and stay with the plugin to sticky the table.

in this link http://jsfiddle.net/coding_rd/rQasQ/1/ if i give the fixedElement,at <div id=“myid” class=“myidclass fixedElement”> the whole thing gets fixed. what is wrong here. i know the content is wrapped inside that div. can i get an working link.

thanks.

You have fixed both the header, as well as the entire table into position.
The table takes up the whole screen (as it is so long) and thus, no scrolling takes place.

As I mentioned before, I would split this problem in two.
I would first make a <div> element at the top of the page which you can sticky using one of the methods you previously linked to.
Then I would use the plugin from your first post to sticky the table header.

I still don’t understand why the solution I posted won’t work for you.

Ok. I did do that what you had said. I put them is 2 seperate divs.
But still something was not ok there so. I dropped everything and started fresh.

If you don’t mind can I get an working example of putting them into 2 seperate div and applying the plugin.

Thanks. Appreciate it.

I just had a look at this.
The problem is that you are nesting your table in <divs> and <form> elements, so deeply, that you cannot separate the table from the other content that you want to sticky.

E.g. you have:

<div>
  <div>
    <div>
      <div>
        <form>
          <div>
            <h1></h1>
            <div>
              <div>
                <input type="button" />
                <span></span>
                <input type="button" />
                <input type="button" />
              </div>
            </div>
            <table class="mytableclass">
            ...
            </table>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

We need to make that something similar to this:


<div id="wrapper">
  <div class="sticky">
    <h1></h1>
    <form>
      <input type="button" />
      <span></span>
      <input type="button" />
      <input type="button" />
    </form>
  </div> <!-- sticky -->
 
  <table class="mytableclass">
  ...
  </table>
</div> <!-- wrapper -->

That way you can separate out your content and make various pieces sticky at will.

If you simplify your HTML in the way I describe, I can give you a hand to implement the rest.

thanks for letting me know this. yes i can do that in the HTML part. So, how do i handle the rest? i need to finish this. Can you please demonstrate this?

Thanks

If you modify your HTML (as above) and post it here, I’ll show you how.

hi,

http://jsfiddle.net/coding_rd/vVKQE/ i have posted the link for the HTML part. hope it’s good.
How to handle the rest?

Thanks.

Yay, that’s much better.
I am away from the PC right now, but I’ll have a look at this later on.

there is one more thing, i don’t want the top to be positioned at 0. top:0 for the class sticky, instead top to be placed at 91px.

.sticky
{
top:91px;
}

thanks.

Ok, here’s a new demo combining the two techniques.

I’m sure you can manage this :slight_smile: