Работа скрипта при разном размере экрана?

Question

[pixelSunBro]

Здравствуйте. Есть скрипт:

$(window).scroll(function(){
    if ($(window).scrollTop() > 0){
        $('.header').css({"background-color":"white"});
    }
    else {
        $('.header').css({"background-color":"transparent"});
    }
});

Нужно что бы он, при ширине экрана <= 768px не менял цвет бэкграунда, а оставлял его белым.

Comments

[Леонид Князев]

А, вопрос в чём? Сейчас это больше похоже на задание.

[pixelSunBro]

Леонид Князев: Здравствуйте. Есть скрипт:

$(window).scroll(function(){
if ($(window).scrollTop() > 0){
$('.header').css({"background-color":"white"});
}
else {
$('.header').css({"background-color":"transparent"});
}
});

Нужно что бы он, при ширине экрана <= 768px не менял цвет бэкграунда, а оставлял его белым, 'как мне это сделать'?

Answer 1

[Stalker_RED]

Добавьте проверку $( window ).width()

Comments

[pixelSunBro]

Спасибо. Получается это будет работать только при перезагрузке?

[Саша]

pixelSunBro: если добавить условие .resize то не только, при загрузке)

[pixelSunBro]

Не совсем понял. У меня получилось так:
$(window).scroll(function(){

if (($(window).scrollTop() > 0) && ($(window).width()>767)){
$('.header').css({"background-color":"white"});
}
else {
$('.header').css({"background-color":"transparent"});
}

if (($(window).scrollTop() > 0) && ($(window).width()>767)){
$('.link').css({"color":"#515769"});
}
else {
$('.link').css({"color":"white"});
}
});

$(window).scroll(function(){
if ($( window ).width()<=767){
$('.header').css({"background-color":"white"});
}

if ($( window ).width()<=767){
$('.link').css({"color":"#515769"});
}

});
Куда добавить условие?

[Stalker_RED]

pixelSunBro: А зачем вы дважды повторяете одинаковые условия, вместо того чтоб просто написать как-то так?

$(window).scroll(function(){
  if ($(window).scrollTop() > 0 && $(window).width() > 767) {
    $('.header').css({"background-color":"white"});
    $('.link').css({"color":"#515769"});
  } else {
    $('.header').css({"background-color":"transparent"});
    $('.link').css({"color":"white"});
  }
});

[pixelSunBro]

Stalker_RED: Да я как то не задумался как его уменьшить)
А вы не подскажите как добавить условие .resize. что рекомендовали выше к этому скрипту?

$(window).scroll(function(){
  if ($(window).scrollTop() > 0 && $(window).width() > 767) {
    $('.header').css({"background-color":"white"});
    $('.link').css({"color":"#515769"});
  } 

  else if ($(window).scrollTop() <= 0 && $(window).width() > 767) {
    $('.header').css({"background-color":"transparent"});
    $('.link').css({"color":"white"});
  }

  else if ($(window).scrollTop() > 0 && $(window).width() <= 767){
    $('.header').css({"background-color":"white"});
    $('.link').css({"color":"#515769"});
  }

  else {
    $('.header').css({"background-color":"white"});
    $('.link').css({"color":"#515769"});
  }
});

[Stalker_RED]

$(window).on("scroll resize", function(){
  // ...
})

[pixelSunBro]

Stalker_RED: Большущее спасибо :)