ScrollLeft sur un div et non sur body.

Bonjour,

Je ne sais pas comment faire pour que mon scroll left se fasse sur le div seulement et non tout le body.

Je ne veux pas mettre l'entête en position:fixed.

Lien en exemple:
http://www.joly-design.com/client/joanne/index.php

Le CSS

*{
    margin:0;
    padding:0;
}

body {color:#000; font:16px/1.3em "Enriqueta",serif;}

body {
bottom:0px;
left:0px;
position:absolute;
top:0px;
width:12000px;
}

#header {
background-color: rgba(0, 0, 0, 0.86);
border-bottom: 0 solid transparent;
border-top: 0 solid transparent;
bottom: 0;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.7);
height:142px;
left: 0;
width:980px;
}

div.clear {clear:both; height:1px; overflow:hidden;}

.section{
    margin:150px 0 0 0;
    bottom:0px;
    width:4000px;
    float:left;
    height:100%;
    text-shadow:1px 1px 2px #f0f0f0;
}

Le HTML

<!-- debut header -->
<div id="header">
	<!-- debut menu -->
	<div id="menu">
	<ul class="nav">
	<li id="m1" class="active"><a href="#section1">Accueil</a></li>
	<li id="m2"><a href="#section2">Biographie</a></li>
	<li id="m3"><a href="#section3">Contact</a></li>
	</ul>
	</div>
	<!-- fin menu -->

<div class="clear"></div>
</div>
<!-- fin header -->

<div class="clear"></div>

<div class="kiki">

<!-- debut section 1 -->
<div class="section" id="section1">
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
SECTION 1<br>
</div>
<!-- fin section 1 -->

<!-- debut section 2 -->
<div class="section" id="section2">
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
SECTION 2<br>
</div>
<!-- fin section 2 -->

<!-- debut section 3 -->
<div class="section" id="section3">
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
SECTION 3<br>
</div>
<!-- fin section 3 -->

</div>

le JS

$(function() {
    $('ul.nav li a').bind('click',function(event){
        var $anchor = $(this);
        /*
        if you want to use one of the easing effects:
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 1500,'easeInOutExpo');
         */
        $('html, body').stop().animate({
            scrollLeft: $($anchor.attr('href')).offset().left
        }, 2000);
        event.preventDefault();
    });
});


$(window).scroll(function() {    
    // find the li with class 'active' and remove it
    $("ul.nav li.active").removeClass("active");
    // get the amount the window has scrolled
    var scroll = $(window).scrollLeft();
    // add the 'active' class to the correct li based on the scroll amount
	
	//alert(scroll);
	
    if (scroll <= 500) {
       $("#m1").addClass("active");
    }
    else if (scroll <= 4000) {
        $("#m2").addClass("active");
    }
    else {
        $("#m3").addClass("active");
		
    }
});

Modifié par britanicus75 (28 Nov 2012 - 18:58)