11489 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je viens vers vous car je plante sur du scroll ....
Je suis en train de développer un site perso en utilisant du Wordpress, et un thème que j'ai déjà bien modifié .
Mon site se compose principalement d'un warper ainsi que de 3 DIV , chacune de ces div possède un z-index différent.
J'ai ainsi un effet d'empilement qui n'est ma fois pas déplaisant, mais le problème actuel c'est que je n'arrive pas a utiliser de fonction de scroll qui me permettent de gérer cet empilement.
Le scroll Down marche quand j'utilise par exemple des ancres simples, mais le scroll up m'est impossible .

Dans l'idéal j'aimerais pouvoir avoir 2 boutons pour passer d'une div a l'autre en fonction de la position actuelle.

Merci d'avance si vous avez des idées, moi je commence a déprimer ....
voila le site en question :

http://www.maximechiron.com

<?php 
get_header();
if (have_posts()) : while (have_posts()) : the_post(); 
$data = get_post_meta( $post->ID, 'key', true );
$customBg = $data['custom-background'];
$tagline = $data['sub-text'];
?>

<img src="<?php echo $customBg;?>" id="loadImg" />

<div id="topPanel">
	<div class="innerTopPanel">
	<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>				
		<br />
		<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

	</div><!--end innerTopPanel-->	
</div><!--end topPanel-->
<script>
jQuery.noConflict(); jQuery(document).ready(function(){
	jQuery(window).load(function(){		
		<?php if($customBg){ $background = $customBg; } else { $background = get_theme_mod('themolitor_customizer_bg');}?>
		jQuery.backstretch("<?php echo $background;?>", {speed: 1000});
	});
});
</script><?php endwhile; endif; get_footer(); ?>


#topPanel {
	width:100%; 
	background: #111;
	text-shadow: 0px 1px 1px rgba(0,0,0,.9); 
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}


#mainPanel {
	width: 100%; 
	position: relative; 
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: #151515;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
}