[zub_samata]

<script type="text/javascript">
 $(function (){
 $(".main").onepage_scroll(
     {
         afterMove: Function(index){
              index=$("p").attr("data-index");
             if (index=="1")
                 $('#menu').removeClass('on_top');
             else
                 $('#menu').addClass('on_top');
         }
     }
 );

 });
</script>

вот мой код по которому я пытался изменить верхнюю менюшку

<div id="menu" class="on_top">elements of menu</div>

типо менюшка которая должна меняться

<style type="text/css">
body {
	margin:0;
	padding:0;
}

#menu {
	height: 30px; 
	width:300px;
	border: 1px solid #666;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	background: #999;
	margin: 0px 50px;
	position:fixed;	

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
	-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
	-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
	opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

#menu:hover, #menu.on_top {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /* IE 5.5+*/
	-moz-opacity: 1; /* Mozilla 1.6 и ниже */
	-khtml-opacity: 1; /* Konqueror 3.1, Safari 1.1 */
	opacity: 1; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}

#content {
	border: 1px solid #F00;
	height:5000px;
	padding: 40px;

}
</style>

код css который я пытаюсь подключить или отключить при определенных условиях

спасибо за Ваше терпение )