Problème - Disparition de Div

Salut tous le monde !

Voilà, j'ai un petit problème que je n'arrive pas à résoudre. J'ai d'abord créer mon site avec des effets de slide et de parallax grâce à des arrières plans fixes et mobiles avec du CSS3 et Javascript. Voilà ce que çà donne :

http://imp3rium.free.fr/test/

Le problème est apparue quand j'ai voulu intégrer du contenu (l'image des 3 triangles). Et bien lorsque la DIV des bulles fixed se retrouvent à la même hauteur que le contenu, la DIV bulle disparaît ... Donc j'ai du mal à trouver la solution, j'ai peur que la construction du site ne me permette pas de mettre du contenu dans ces DIV ...

Voici mon code, j'ai utilisé aussi du code Javascript qui pourra aussi vous aidez à comprendre :

HTML :

<div id="home" class="bk bk_0">
    <div class="icons"><img src="img/icons.png" width="400" height="400" /></div>
	<div class="img_1"></div>
    </div>

CSS :

div{
	background:transparent;
}
img{
	background:transparent;
}
.bk_blank{
	width:100%;
	height:478px;
	background:transparent;
	overflow:hidden;
	text-align:center;
	z-index:2;	
}
.img_1{
	height:1600px;
	width:100%;
	background: transparent url(../img/img_1.png) no-repeat fixed 78% 400px;
.icons{
	width:400px;
	height:400px;
	padding-top: 20%;
	padding-left: 12%;
}
.bk{	
	width:100%;
	height:1600px;
.bk_0{
	background:url(../img/bk_1.jpg) no-repeat fixed;
	background-position:center;	
}

JS:

jQuery(document).ready(function($) {
	a=parseFloat(400);// valor inccial para el background 1
	b=parseFloat(0);// valor inccial para el background 1
	c=parseFloat(400);// valor inccial para el background 2
	d=parseFloat(0);// valor inccial para el background 2
	var scrollTop = $(window).scrollTop();			
	var scroll_actually= new Array();// identifica los valoares del background X y  Y
		
	$(window).scroll(function(){//this is not the cleanest way to do this, I'm just keeping it short.
		if(scrollTop>$(this).scrollTop()) // desplazamiento hacia arriba
		{
			if (getScrollTop()<=0 && getScrollTop()>=0)// identyifica cuando la posicion del background_1 esta en scroll
			{
					a=a+10;// posicion del background1 decrementa en 35 pixeles
					b=b+2;// posicion de background1 decrementa en 15 pizeles 
					$('.img_4').css('backgroundPosition', '78% '+a+'px');
					$('.img_3').css('backgroundPosition', '78% '+a+'px');
					$('.img_2').css('backgroundPosition', '78% '+a+'px');
					$('.img_1').css('backgroundPosition', '78% '+a+'px');
					$('.bk_0').css('backgroundPosition', '50% 50%'+b+'px');		
			}
			if (getScrollTop()>=2050 && getScrollTop()<=3650)
			{
					c=c+10;// posicion del background2 decrementa en 35 pixeles
					d=d+10;// posicion del background2 decrementa en 35 pixeles
					$('.bk_1').css('backgroundPosition', '50% 50%'+d+'px');				
			}
		}
		else
		{// desplazamiento hacia  abajo
			if (getScrollTop()>=0 && getScrollTop()<=0)			
			{
				  a=a-10;// posicion del background1 incrementa en 35 pixeles
				  b=b-2;// posicion del background1 incrementa en 35 pixeles
				  $('.img_4').css('backgroundPosition', '78% '+a+'px');
				  $('.img_3').css('backgroundPosition', '78% '+a+'px');
				  $('.img_2').css('backgroundPosition', '78% '+a+'px');
				  $('.img_1').css('backgroundPosition', '78% '+a+'px');
				  $('.bk_0').css('backgroundPosition', '50% 50%'+b+'px');				
		    }
				if (getScrollTop()>=2050 && getScrollTop()<=3650)			
			{
				  c=c-10;// posicion del background1 incrementa en 35 pixeles
				  d=d-10;// posicion del background1 incrementa en 35 pixeles
				  $('.bk_1').css('backgroundPosition', '50% 50%'+d+'px');				
		    }
	 	}
		if (getScrollTop()==0)// ajusta la posiciones y las reseatea en cero cuando hace scroll havciaa arriba
		{
			a=parseFloat(400);
			b=parseFloat(0);
			c=parseFloat(400);
			d=parseFloat(0);
			$('.bk_0').css('backgroundPosition', '50% 50%');	
			$('.bk_1').css('backgroundPosition', '50% 50%');
			$('.img_5').css('backgroundPosition', '28% '+400+'px');
			$('.img_4').css('backgroundPosition', '78% '+400+'px');
			$('.img_3').css('backgroundPosition', '78% '+400+'px');					
   		    $('.img_2').css('backgroundPosition', '78% '+400+'px');			
   		    $('.img_1').css('backgroundPosition', '78% '+400+'px');						
		}
	  scrollTop = $(this).scrollTop();		
	});
});
function getScrollTop(){ ///  verifica el calculo total en pixeles de toda la pagina

    if(typeof pageYOffset!= 'undefined'){
        //most browsers
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

Merci d'avance.
Modifié par Imp3RiuM (05 Mar 2012 - 15:02)