Проблемы с изотопами - всегда сохраняйте элемент в верхнем левом углу после сортировки / фильтрации

Question

Я использую изотоп для фильтрации и сортировки элементов по имени или категории, по убыванию или по возрастанию в основном контейнере.

Мне нужно сохранить первый элемент статичным, чтобы на него не влияли сортировка / фильтрация. Мне удалось это получить, но это работает для первого элемента, однако, когда добавлен определенный фильтр, первый элемент скрыт, и поэтому мне нужно, чтобы 2-й элемент (который будет отображаться как первый) стал статичным, поэтому я всегда имею статический элемент, видимый в верхнем левом углу.

Приведенный ниже код работает для первого элемента. Я попытался изменить код ниже, чтобы включить 2-й элемент, чтобы оставаться статичным, когда применяется сортировка, но я изо всех сил. Кто-нибудь может помочь?

            var $container = $('#container'),
                 filters = {};
                 $container.isotope({
                itemSelector: '.element',
                masonry: {
                    columnWidth: 260
                },
                getSortData: {
                    category: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-category');
                    },
                    date: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-expiry');
                    },
                    name: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.find('.name').text();
                    },
                    first: function($elem) {
                        // sort by first_static first, then by original order
                        return ($elem.hasClass('first_static') ? -500 : 0) + $elem.index();
                    }
                },
                sortBy: 'first'
            });

Я работаю над JSFiddle ( http://jsfiddle.net/AbUgj/24/), чтобы продемонстрировать, что я пытаюсь сделать

Answer 1

Добавить новый класс с именем show_el затем попробуйте следующий код.

.show_el:first {
    display: static;
}

Answer 2

Давайте предположим, что у вас есть класс для всех видимых элементов, давайте назовем его visible-element, Затем вы можете определить это правило CSS:

.visible-element:first {
    display: static;
}

Вы должны убедиться, что все видимые элементы имеют visible-element класс и ни один из невидимых элементов не имеет visible-element класс хотя.