Измените изображение с помощью добавления/удаления класса в Javascript. А как насчет начальной прокрутки страницы = 0?

В настоящее время я пытаюсь изменить свой логотип заголовка, когда пользователь прокручивает темный фон до более светлого фона. У меня работает класс добавления/удаления, но когда пользователь загружает страницу, изображение не отображается, потому что оно выполняется, когда прокрутка превышает 0 пикселей прокрутки. Как показать начальные условия загрузки страницы без прокрутки пользователем?

$(function() {
  var header = $(".logo");
  var about = $(".angle").offset().top;;
  $(window).scroll(function() {    
       var scroll = $(window).scrollTop();
       if (scroll >= about) {
          header.removeClass('lightLogo').addClass('darkLogo');
       } else {
          header.removeClass('darkLogo').addClass('lightLogo');
       }
    });   
});

javascript scroll css header addclass
person Niroshan    schedule 18.02.2015    source источник
comment
Почему бы просто не поместить класс 'lightLogo' в заголовок вашего HTML, чтобы он начинался именно так?   -  person    schedule 18.02.2015
comment
хм, ну, я пытался, но затем светлый логотип, независимо от того, добавляю я или удаляю класс, он не может измениться на новое изображение.   -  person Niroshan    schedule 18.02.2015
comment
Если вы просто добавите класс darkLogo, у вас возникнет конфликт с классом lightLogo, поэтому победит тот из селекторов, который имеет приоритет. Вы можете (1) удалить один класс, когда добавляете другой, или (2) просто использовать один класс и переключать его, или (3) сделать по умолчанию то, что есть в lightLogo, и просто иметь один класс darkLogo, который переопределяет его.   -  person    schedule 18.02.2015
comment
хм, какой-нибудь код, который поможет мне переопределить это?   -  person Niroshan    schedule 19.02.2015
comment
Я опубликовал ответ, вероятно, с самым простым подходом, который заключается в том, чтобы просто добавить его изначально через имя класса. Дайте мне знать, если это не сработает.   -  person    schedule 19.02.2015

Ответы (1)


arrow_upward
0
arrow_downward

Самым простым может быть просто добавление класса изначально, например:

$(function() {
  var header = $(".logo").addClass('lightLogo');
  var about = $(".angle").offset().top;;
  $(window).scroll(function() {    
       var scroll = $(window).scrollTop();
       if (scroll >= about) {
          header.removeClass('lightLogo').addClass('darkLogo');
       } else {
          header.removeClass('darkLogo').addClass('lightLogo');
       }
   });   
});

Теперь заголовок будет начинаться с .lightLogo при загрузке страницы.

person Community    schedule 18.02.2015
comment
Здорово! ах, такое простое дополнение. Я новичок в javascript, но спасибо за помощь. Многому я научился благодаря логическим дополнениям, но это меня просто захлестнуло. Спасибо! - person Niroshan; 19.02.2015
comment
У меня есть еще одна проблема, с которой вы могли бы мне помочь. В настоящее время я заставляю функцию добавления/удаления работать, когда пользователь прокручивает определенный div, который зависит от размера окна, в котором они запускают страницу. к сожалению, если они изменяют размер браузера, точка, в которой он добавляет/удаляет, больше не связана с div. Им придется обновить страницу, чтобы они совпадали. Могу ли я сделать так, чтобы эта функция повторялась независимо от того, что пользователь делает с изменением размера? - person Niroshan; 19.02.2015
comment
Вы можете использовать jQuery вместо прокрутки для запуска вашей функции для нескольких событий: $(window).on('scroll resize', function() {... - person ; 19.02.2015
comment
Отлично, мне нужно изменить остальную часть функции или просто добавить это? Я пробовал это, и мне не повезло с изменением размера и его настройкой. - person Niroshan; 19.02.2015
comment
Возможно, вам придется переместить вычисление about внутри обработчика событий, так как для изменения размера ключа может быть то, что его значение изменилось. - person ; 19.02.2015
comment
Круто, исправили! - person Niroshan; 19.02.2015