@GeKskill

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

Как такая реализация сказывается на производительности, ведь скролл на каждый пиксель инициирует изменение?
$(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%'
                  });
                } 
              });
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
Работа с DOM само по себе дорогостоящее занятие. Любые повторяющиеся события внутри DOM могут приводить к проблеме с производительностью.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы