snippetjavascriptMinor
jQuery plugin to create sticky headers
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);
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
-
chain method calls to the same object
-
group multiple calls to css() passing an object as the parameter:
-
group multiple
var declarations using commasvar 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.