Menu jquery

thybarth
Javascript

Bonjour,

Je vous expose mon petit souci:
J'ai fais un menu en css + jquery dans un header fixe, quand je suis en haut de la page pas de souci l'animation du menu fonctionne, mais dès que je sroll l'animation ne veux plus fonctionner et j'ai beau chercher je ne trouve pas d'où vient le problème.

Voici les différents bouts de code correspondants :
CSS principal :
[code]#header{
position: fixed;
background-color: #7fc6bc;
margin-left: 0px;
width: 100%;
height: 100px;
padding: 5px;
-webkit-box-shadow: 0px 5px 5px 0px #333;
-moz-box-shadow: 0px 5px 5px 0px #333;
box-shadow: 0px 5px 5px 0px #333;
}

logo { 
top: 0px;
position:absolute;

}

container_header{ 
margin: 0px;
width: 100%;
height: 100%;

}
[/code]

CSS du menu :
[code]img
{
border: none;
}

/ dock - top /
.dock
{
position: relative;
margin-left: 44%;
top: 10px;
height: 50px;
text-align: center;
}

.dock-container
{
position: absolute;
height: 50px;
background: url(../img/fond_div.png);
padding-left: 20px;
border: 4px #3B5998 solid;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 2px 2px 15px 2px #333;
-moz-box-shadow: 2px 2px 15px 2px #333;
box-shadow: 2px 2px 15px 2px #333;
}

a.dock-item
{
display: block;
width: 40px;
color: #333;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font-family: 'Voltaire', sans-serif;
}

.dock-item img
{
border: none;
margin: 5px 10px 0px;
width: 100%;
}

.dock-item span
{
display: none;
padding-left: 20px;
}
[/code]

HTML de la page :
[code]<link href="style/style_tb.css" rel="stylesheet" type="text/css">
<link href="style/menu.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script> <!-- menu -->

</head>

<body>

<div id="container_header">

<div id="header">

<div class="dock" id="dock">
<div class="dock-container"> <!-- Menu top -->
<span> <a class="dock-item" href="#c1"><img src="images_menu/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#c2"><img src="images_menu/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#c3"><img src="images_menu/music.png" alt="music" /><span>Musique(s)</span></a>
<a class="dock-item" href="#c4"><img src="images_menu/contact.png" alt="contact" /><span>Contact</span></a></span>
</div>
</div>

<div id="logo"><img src="img/thybarth.png" width="400" height="118" alt="LOGO"></div>

</div> <!-- fin .header -->

</div>
<!-- fin .container_header -->

<div class="container">
<div id="left_party"><p>partie gauche</p>

</div> <!-- fin .left_party -->
</div> <!-- fin .container -->
[/code]

Et enfin le Javascript qui ce trouve en bas de la page :
[code]<script type="text/javascript">

$(document).ready(
    function()
    {
        $('#dock').Fisheye(
            {
                maxWidth: 50,
                items: 'a',
                itemsText: 'span',
                container: '.dock-container',
                itemWidth: 40,
                proximity: 90,
                halign : 'center'
            }
        )

    }
);

</script> <!-- fin .effet menu -->
[/code]

Pour vous rendre compte du souci voici le [url=http://www.thybarth.fr/test]lien[/url]
Merci pour votre aide

Aucune réponse