CSS стили по условию JQuery?

Question

[GeKskill]

Как такая реализация сказывается на производительности, ведь скролл на каждый пиксель инициирует изменение?

$(window).scroll( function(){
                if( $(window).scrollTop() > ucity_prop.pos.top){
                  $('.ucity').css({
                    'position':'fixed',
                    'left': ucity_prop.pos.left + 'px',
                    'top': '0px',
                    'width': ucity_prop.width + 'px'
                  });
                } else {
                  $('.ucity').css({
                    'display':'block',
                    'position':'absolute',
                    'left':'',
                    'top':'130%',
                    'width': '25%'
                  });
                } 
              });

Answer 1

[Никита Михайлов]

Работа с DOM само по себе дорогостоящее занятие. Любые повторяющиеся события внутри DOM могут приводить к проблеме с производительностью.

В чём смысл каждый раз устанавливать стили для .ucity при условии, что scrollTop не добрался до нужного значения? Эти стили можно задать изначально в CSS. Уже одним изменением меньше. Всё остальное уберите в отдельные классы. Проверяйте, есть ли такой класс при scrollTop() < ucity_prop.pos.top и если что — удаляйте класс

Кстати можно ещё дополнительно посмотреть в сторону https://developer.mozilla.org/ru/docs/Web/CSS/will...

Comments

[GeKskill]

@Проверяйте, есть ли такой класс при scrollTop() < ucity_prop.pos.top и если что — удаляйте класс@
А чем фактически это будет отличаться? Разве что в DOM писать меньше символов... Суть та же выходит, если проверять наличие класса (обращаться к элементу).
P/s сейчас глянул в DevTool style меняется только раз, потом не видно чтобы переписывало. Похоже JQ как-то сам проверяет надо ли обновлять.