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