Wyświetlanie divów w zależności od scrolla

Witam,

Mam problem przy mojej stronie. Chcę, aby w zależności od położenia scrolla w tym samym miejscu pojawiały się mi inne divy.
Mniej więcej wydaje mi się, że wiem jak to zrobić, jednak mój cały problem polega na tym, że chcę to uzależnić od tego w jakiej rozdzielczości wyświetlana jest strona. Tak żeby działało zarówno na monitorach fullHD jak i zwykłych HD czy też innych.
W jqery mam taką funkcję, która mi odpowiada za zamienianie tych elementów:

 $('#wrapper').scroll(function () {
    var y = $(this).scrollLeft(); 
	if ( y<200) {
$('.ikony-firma').fadeIn(1000);
$('.ikony-uslugi').fadeOut(1000);
$('.ikony-flota').fadeOut(1000);
$('.ikony-tematyka').fadeOut(1000);
$('.ikony-strefa').fadeOut(1000);
    }
  if ((y> 200) & (y<400)) {
$('.ikony-firma').fadeOut(1000);
$('.ikony-uslugi').fadeIn(1000);
$('.ikony-flota').fadeOut(1000);
$('.ikony-tematyka').fadeOut(1000);
$('.ikony-strefa').fadeOut(1000);        
    }
  if  ((y> 400) & (y<600)) {
$('.ikony-firma').fadeOut(1000);
$('.ikony-uslugi').fadeOut(1000);
$('.ikony-flota').fadeIn(1000);
$('.ikony-tematyka').fadeOut(1000);  
$('.ikony-strefa').fadeOut(1000);     
    }
  if  ((y> 600) & (y<800)) {
$('.ikony-firma').fadeOut(1000);
$('.ikony-uslugi').fadeOut(1000);
$('.ikony-flota').fadeOut(1000);
$('.ikony-tematyka').fadeIn(1000);   
$('.ikony-strefa').fadeOut(1000);     
    }
    if  ((y> 800) & (y<1000)) {
$('.ikony-firma').fadeOut(1000);
$('.ikony-uslugi').fadeOut(1000);
$('.ikony-flota').fadeOut(1000);
$('.ikony-tematyka').fadeOut(1000);   
$('.ikony-strefa').fadeIn(1000);     
    }
});

Czy da się to jakoś uzależnić od szerokości okna przeglądarki? Jak to zastosować w moim przykładzie? Być może jest jakieś prostsze rozwiązanie mojego problemu?
Tutaj link do struktury strony: http://jsbin.com/nodebaroke/edit?html,css,js,output

A spróbuj takie coś:

function scollIt(thisSection){
	$(thisSection).fadeIn(1000);
	$('.ikony').not(thisSection).fadeOut(1000);
}

$('#wrapper').scroll(function () {
   
	var y = $(this).scrollLeft(); 
	var windowWidth = $(window).width();

	if ( y<windowWidth) {
		thisSection = '.ikony-firma';
    }
	if ((y> windowWidth) & (y<windowWidth*2)) {
		thisSection = '.ikony-uslugi';  
    }
	if  ((y> windowWidth*2) & (y<windowWidth*3)) {
		thisSection = '.ikony-flota';
    }
	if  ((y> windowWidth*3) & (y<windowWidth*4)) {
		thisSection ='.ikony-tematyka';
    }
    if  ((y> windowWidth*4) & (y<windowWidth*5)) {
		thisSection ='.ikony-strefa';
    }
	scollIt(thisSection);
});

Niestety nie działa. Moje ikony zaczynają się nakładać na siebie. I nie wyświetlają się w odpowiednim momencie. Tj. Gdy z pierwszej sekcji przechodzę na drugą nie wyświetlają się następne ikony, tylko dopiero na sekcji 3. A te które powinny się ukryć są widoczne na warstwie pod spodem.

Aha, dodaj do każdego $('.ikony-firma') itd... klasę '.ikony'. Pokombinuj coś też z tym windowWidth, może uda ci się dopasować.

Okej, dzięki za zainteresowanie i pomoc, będę próbował.