плагин jQuery для создания липких заголовков


Я написал плагин, который принимает общий подход для создания липких заголовков И хотелось бы пересмотреть код. Это допустимо в JavaScript?

Демо-Страница

Однако это мой первый плагин, и я хотел бы обратную связь о том, как сделать его более удобным и более читабельным, прежде чем отпустить его и положить его на GitHub.

Заголовок застрянет в верхней части страницы, пока не встретит дно это контейнер, после чего он застрял на дно контейнера и уплывает с экрана.

Мне пришлось создать прототип, чтобы взять оригинальный заголовок на место, как только он покидает документооборота, а также применить фиксированные настройки CSS для заголовка, чтобы сохранить его внешний вид такой же, когда он выходит из потока.

(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 && placeholder != undefined) {
                if (placeholder != undefined) {
                    placeholder.remove();
                    placeholder = undefined;
                    header.css(originalCss);
                }
            }
            else if (pageOffset > containerTop && pageOffset < (containerBottom - headerHeight)) {
                if (placeholder == undefined) {
                    placeholder = $('<div/>')
                    .css('height', header.outerHeight() + 'px')
                    .css('width', header.width() + 'px');
                    header.before(placeholder);
                    header.css('position', 'fixed');
                    header.css('width', originalWidth + 'px');
                }
                header.css('top', settings.padding + 'px');
            }
            else if (pageOffset > (containerBottom - headerHeight)) {
                header.css('top', (containerBottom - headerHeight) - pageOffset + settings.padding + 'px');
            }
        });
    });
}
})(jQuery);


3366
4
задан 22 марта 2011 в 12:03 Источник Поделиться
Комментарии
2 ответа

Рискуя придирки там достаточно нескольких малых/микро-оптимизаций, которые можно сделать:


  • группа несколько ВАР деклараций через запятую

    ВАР containerTop = контейнер.смещение().топ, headerOrigin = заголовок.смещение().топ;


  • метод цепных вызовов на один и тот же объект

    заголовок.раньше(прототип).в CSS('...')


  • группировка нескольких звонков в CSS() передать объект в качестве параметра:

    заголовок.в CSS({ положение: фиксированная, ширина: originalWidth + 'РХ'});


2
ответ дан 23 марта 2011 в 09:03 Источник Поделиться

Я использовал этот элемент, который был слева от контейнера, что означает, что див положить в ненужное пространство справа.
Мне нужно, чтобы отрегулировать линии 40 до следующих:

    placeholder = $('<div style="display:none;"/>')

Не уверена, как ты будешь делать это автоматически.

Также, какова цель

    header.css('width', originalWidth + 'px');

Кажется, лучше работать без этого для меня.

0
ответ дан 17 июня 2011 в 07:06 Источник Поделиться