[Javascript] [HTML] menù responsive fisso

[wolfland]

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.

 

[Max 1]

La posizione fissa e il responsive di regola non vanno daccordo!
Ti sposto in JS
[MOD]
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag

quando posti del codice, oppure la funzione codice dalla barra degli strumenti

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro

 

[wolfland]

Chiedo scusa, hai ragione, avrei dovuto usare i tag code... ero indeciso dove postare l'argomento se in CSS o in JS. Comunque molti siti riescono a visualizzare il menù fisso responsive senza problemi, per questo ho pensato a qualche errore nel mio codice o un approccio diverso. Qualche dritta?