Navigazione a comparsa

[FraChri]

Ciao,
vorrei realizzare una navigazione che compaia automaticamente dopo che la pagina raggiunge il box (posizionato a 800px dal margine in alto) e vorrei si bloccasse.

Al momento ho trovato questo jquery ma non riesco a modificarlo in base a ciò che voglio ottenere.

$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {

$('#Menu').fadeIn();
} else {

$('#Menu').fadeOut();
}
});

});//DOM



Qualcuno riesce ad aiutarmi per favore?

Grazie

[lucavizzi]

$(function() {
    $('#Menu').css('position','fixed');
    $(window).scroll(function() {
      if($(this).scrollTop() >= 800) {
        $('#Menu').fadeIn(); 
      } else {
        $('#Menu').fadeOut();
      }
   });
});//DOM

Prova così.
Fammi sapere

[FraChri]

$(function() {
    $('#Menu').css('position','fixed');
    $(window).scroll(function() {
      if($(this).scrollTop() >= 800) {
        $('#Menu').fadeIn(); 
      } else {
        $('#Menu').fadeOut();
      }
   });
});//DOM

Prova così.
Fammi sapere

Ciao,
grazie mille! Era proprio quello che cercavo!
Solo mi da un "problema", quando carico la pagina è già attivo, nel momento in cui vado in giù scompare e poi riappare come volevo.
Sai dirmi come posso nasconderlo dall'inizio?

ecco il link della prova: http://www.francescapellicano.altervista.org/

Grazie

[lucavizzi]

Usa una regola CSS:

<style type="text/css">
#Menu{
   position:fixed;
   display:none;
}
</style>

Aggiungendo questa regola, nascondi il menu dall'inizio (display:none) e puoi eliminare dallo script la riga:

$('#Menu').css('position','fixed');

avendo già dichiarato la position nella regola (position:fixed)

Ciao

[FraChri]

ci ho provato ma non cambia. Nel css ho questo:

nav {
position:fixed;
display: none;
top: 0;
width: 100%;
height: 70px;
background-color: rgba(89,74,66,1.00);
}

nav li {
display: inline-block;
padding: 24px 10px;
}

nav li a {
color: #757575;
text-transform: uppercase;
}

e il risultato non cambia.. c'è qualcosa di sbagliato?

[lucavizzi]

Ciao Francesca, hai messo online le modifiche? Mi pare non ci siano.
Su altervista vedo la position:fixed messa inline nel tag "nav", ma non la regola che mi hai postato.
Ho notato che alla riga 27 del file reset.css è impostato un display:block per il tag nav, il che contrasta con il display:none che ci occorre.
Metti online le modifiche comunque, ti dirò come correggere.

[FraChri]

Ho messo online le modifiche ora.

Quindi dovrei togliere dal reset display: none?

[FraChri]

Ciao Luca,
ho tolto quella regola nel reset ed ora è tutto corretto! ti ringrazio molto!

Francesca

[lucavizzi]

Ho messo online le modifiche ora.

Quindi dovrei togliere dal reset display: none?

Nel reset c'è il display:block, è una regola che serve per i browser che non supportano HTML5 e non sanno cosa sia il tag nav.
In pratica il display:block del file reset.css sovrascrive il display:none del file style.css

Per ovviare basta che inverti, nel file index.html queste due inclusioni:

<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<link href="css/reset.css" rel="stylesheet" type="text/css">

cioè devi prima includere reset.css e solo dopo style.css

Nel tuo caso non possiamo usare !important nel display: none altrimenti il fadeIn() di jQuery non funzionerebbe.

Carino il template

[lucavizzi]

Ciao Luca,
ho tolto quella regola nel reset ed ora è tutto corretto! ti ringrazio molto!

Francesca

....non avevo visto la tua risposta
Non c'è di che