Pohyblivo-fixné pozadie pomocou jQuery

Určite viete že obrázok na pozadí stránky sa môže pri scrollovaní posúvať spolu s obsahom alebo zostať statické,pričom sa posúva len obsah stránky. V tomto tipe si ukážeme ako tieto dve možnosti skombinovať.

 

Tento postup sa hodí najmä ak chceme mať na pozadí veľkú fotografiu ktorá sa nemá vertikálne opakovať a nekončí prechodom do jednej farby . Nakoľko nevieme aké rozlíšenie bude mať používateľ na svojom počítači, pripravili sme pozaďový obrázok (fotografiu) v dostatočnej výške aj pre vysoké rozlíšenia.

Nechceme však ľudí s menšími monitormi ukrátiť o pekný dizajn. Najlepšie by bolo keby fotografia scrollovala pokiaľ to ide (neposunuli sme sa až na jej koniec) a keď už to nejde, zostala na pozadí staticky.

V tomto prípade nám pomôže jQuery:

$(function() {

	$('body').css('background-attachment','scroll');
	
	$(window).scroll(function(){
			var bgheight = 1796; // tu treba nastaviť výšku obrázka
			var wheight = $(window).height();
			var sc = $(window).scrollTop();
			if((sc+wheight) > bgheight){
				var offs = wheight+sc-bgheight;
				$('body').css('background-position', '50% '+offs+'px');
			}
			else{
				$('body').css('background-position','50% 0');
			}
	});
	
});

Tento jednoduchý kus kódu sa spustí vždy keď používateľ zascrolluje. Vypočíta o koľko treba nastaviť posunutie pozadia aby to vyzeralo že sa pozadie vôbec neposunulo a nastaví požadované CSS. 

Na začiatku kódu sme ešte nastavili pozadiu vlastnosť background-attachment na scroll . Naše CSS totiž vyzerá na načiatku takto:

body{
   background: #fff url(img/bg.jpg) no-repeat 50% 0;
   bacgkround-attachment: fixed;
}

 Pri načítaní stránky je pozadie nastavené na fixnú pozíciu a až Javascript sa stará o zmenu. Je to kvôli používateľom s vypnutým Javascriptom, aby u nich nebola stránka po zascrollovaní rozbitá (bez pozadia).