[aksak1988]

Здравствуйте. Стоит задача при определенных нескольких условиях выполнять одно, а при определенных других условиях - второе.

Вот код:

$(document).ready(function(){
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( top >= $(window).height()*5.245)) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    if ( top >= $(window).height()*5.545)) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

    if (top >= $(window).height()*6.315) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    if (top >= $(window).height()*7.215) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

})
});

Дело в том, что таких условий 56 штук. Можно ли как-то сократить эту конструкцию?

Например, что-то вроде этого:

$(document).ready(function(){
  $(window).scroll(function() {
    var top = $(this).scrollTop();
    
    if ( (top >= $(window).height()*5.245) || (top >= $(window).height()*6.315)) {
			$("#a7").css({
      	'background-image':'url(grey.png)',
        'border-color':'#252525'
        });
        }
        
    else if ( (top >= $(window).height()*5.545) || (top >= $(window).height()*7.215)) {
      $("#a7").css({
        'background-image':'url(white.png)',
        'border-color':'#fff'
        });
        }

})
});

Но тут, понятное дело, это не работает, т.к срабатывает только первый аргумент в каждом условии, как только становится true, а остальное игнорируется. А нужно чтобы при всех указанных условиях срабатывало событие.

Иначе говоря, нужно чтобы css применился к одному блоку при прокрутке несколько раз в соответствии с параметрами условия, когда они становятся true. Только вот покороче бы это записать, не могу найти решения.