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

k0nrad9

2015-10-30T14:27:17+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 10

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:

Kopiuj

 $('#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

2015-10-30T16:16:49+01:00

Rejestracja: dni
Ostatnio: dni

A spróbuj takie coś:

Kopiuj

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);
});

k0nrad9

2015-10-30T16:25:29+01:00

Rejestracja: dni
Ostatnio: dni
Postów: 10

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.