HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptMinor

jQuery plugin to create sticky headers

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
stickycreatepluginheadersjquery

Problem

I've written a plugin that takes a generic approach to creating sticky headers and would like to have the code reviewed. Is this acceptable JavaScript?

Demo Page

It's my first plugin however and I'd like feedback about how to make it more user friendly and more readable before releasing it and putting it up on GitHub.

The header becomes stuck to the top of the page until it encounters the bottom of it's container, upon which it gets stuck to the bottom of the container and floats off the screen.

I had to create a placeholder to take the header's original place once it leaves the document flow and also apply fixed CSS settings to the header to keep it's appearance the same when it leaves the flow.

```
(function ($) {
$.fn.stickySectionHeaders = function (options) {

var settings = $.extend({
stickyClass: 'header',
padding: 0
}, options);

return $(this).each(function () {

var container = $(this);
var header = $('.' + settings.stickyClass, container);

var originalCss = {
position: header.css('position'),
top: header.css('top'),
width: header.css('width')
};

var placeholder = undefined;
var originalWidth = header.outerWidth();

$(window).scroll(function () {
var containerTop = container.offset().top;
var headerOrigin = header.offset().top;
var headerHeight = header.outerHeight();
var containerHeight = container.outerHeight();
var containerTop = container.offset().top;
var containerSize = container.outerHeight();
var pageOffset = $(window).scrollTop() + settings.padding;
var containerBottom = containerHeight + containerTop;

if (pageOffset containerTop && pageOffset ')
.css('height', header.outerHeight() + 'px')
.css('width', header.width() + 'px');
header.before(placeholder);

Solution

At the risk of nitpicking there's quite a fiew small/micro-optimizations that could be done:

-
group multiple var declarations using commas

var containerTop = container.offset().top, headerOrigin = header.offset().top;

-
chain method calls to the same object

header.before(placeholder).css('...')

-
group multiple calls to css() passing an object as the parameter:

header.css({ position: 'fixed', width: originalWidth + 'px'});

Context

StackExchange Code Review Q#1381, answer score: 2

Revisions (0)

No revisions yet.