Ciao a tutti, come da titolo, ho un problema con il men�:
voglio creare un men� che rimanga fisso quando scrollo la pagina e fin qui tutto ok, poi voglio che tale men� sia responsivo e anche qui va bene, il problema nasce quando metto insieme le due cose.

A schermo intero funziona tutto, ma se ridimensiono la finestra del browser, con il men� che si adatta in automatico (quindi acquisisce le classiche sembianze di un men� mobile, con le striscette orizzonatali che si espande al click), nel momento in cui scrollo la pagina ed arrivo al punto in cui la barra del men� si blocca, questo, oltre a bloccarsi, si espande senza click ed anche il contenuto (le singole voci) risulta enormemente distanziato.

Da quel che ho visto, ci� che da problemi � la positione:fixed che aggiungo al men� quando scrollo la pagina, ma non posso toglierla, altrimenti il men� non si bloccherebbe in cima.

Questo � il codice javascript per il blocco del men�:


$(document).ready(function() {
var menu = $("#menuM");
var posizione = menu.position();

$(window).scroll(function() {

if ($(window).scrollTop() >= posizione.top) {
menu.addClass("fissa");

} else {
menu.removeClass("fissa");
}})});


Questo � il codice JQuery per la trasformazione del men� mobile:


var ww = jQuery(window).width();
jQuery(document).ready(function() {

jQuery("nav li a").each(function() {
if (jQuery(this).next().length > 0) {
jQuery(this).addClass("parent");
};
})

jQuery("#btn-menu").click(function(e) {
e.preventDefault();
jQuery(this).toggleClass("active");
jQuery("nav ul").slideToggle('fast');
});
adjustMenu();
jQuery('.remove').click(function(e) {
jQuery('nav').css('top','0');
});
})

jQuery(window).bind('resize orientationchange', function() {
ww = jQuery(window).width();
adjustMenu();
});


var adjustMenu = function() {
if (ww < 768) {
jQuery("nav").css("display", "block");
jQuery("#btn-menu a").css("display", "block");
jQuery("#btn-utente a").css("display", "block");
if (!jQuery("nav a").hasClass("active")) {
jQuery("nav ul").hide();
}

} else {

jQuery("#btn-menu a").css("display", "none");
jQuery("#btn-utente a").css("display", "none");
jQuery("nav").show();
jQuery("nav ul").show();
jQuery("nav li").removeClass("hover");
jQuery("nav a").unbind('click');

jQuery("nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
jQuery(this).toggleClass('hover');
});
}
}



Questo � il CSS:


.menu{
text-align:center;
vertical-align:middle;
height:3em;
padding: 0;
font: 1.08em Arial, Helvetica, sans-serif;
position:relative;
}



.menu li {
background: none;
float:left;
list-style: none;
height: 100%;
}

ul.menu {
margin: auto;
padding: 0;
height: 100%;
width:65em;
}

ul.menu li {
float:left;
list-style: none;
height: 100%;

}

ul.menu li.hover,
ul.menu li:hover {
position: relative;
z-index: 599;
}

ul.menu li a {
padding: 0.7em 1.1em 0 1.1em;
color: #fff;
text-decoration:none;
display:inline-block;
}

ul.nav-sub {
visibility: hidden;
position: absolute;
padding:0;
margin-left:0;
text-align:left;
top:2.8em;
z-index: 598;
background: #000000;
}


ul.nav-sub li {
height: 1.6875em;
width:10.3125em;
border:0;
margin-top:0.0625em;
list-style: none;
background: none;
}

ul.nav-sub li a {
display:block;
padding: 0.375em 0.3125em 0.375em 0.3125em;
font: 0.9em Arial, Helvetica, sans-serif;
font-variant:small-caps;
text-align:left;
}

#btn-menu{
padding: 0;
margin: 0;
margin-top:0.625em !important;
float:left;
margin-left: 1%;
height:1.5625em;
display:inline-block;
}

#btn-utente{
padding: 0;
margin: 0;
margin-top:0.625em !important;
margin-left: 85%;
height:1.5625em;
display:inline-block;
}

#menu-principale li{
float: none;
display:block;
position: relative;
text-align: left;
}

.nav-sub {
padding:0;
margin:0;
background: #111 none repeat scroll 0 0;
width:100%;
position:relative;
top:3.75em;
}

Questa � la classe aggiunta da javascript allo scroll della pagina:

.fissa {
position: fixed;
top:0px;
z-index:999;
}


Questo � il codice HTML del men�:

<nav id="menuM">

<div id="btn-menu">
<a href="#"><img src="img/mobile.png"></a>
</div>

<div id="btn-utente">
<a class="popup-link" href="#"><img src="img/utente.png"></a>
</div>

<ul class="menu" id="menu-principale">
<li><a href="Index.php">Home</a></li>
<li><a href="javascript:void(0)">A</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">B</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">C</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">D</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">E</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="g.php">F</a></li>
<li><a href="g.php">G</a></li>
</ul>
</nav>


Spero di essere stato chiaro nello spiegare il problema e che ci sia qualcuno che sappia darmi una soluzione. Grazie in anticipo.