[Javascript] div sempre al top

Maria78

Nuovo Utente
4 Feb 2017
8
0
1
43
Ciao a tutti,

Premetto che sono una neofita di questo forum e spero di sbagliare!

Sto imparando, da autodidatta, a progettare siti web.

La struttura della mia pagina è questa.
HTML:
<div id="a">

…

…

</div>

<div id="a">

…

…

</div>

<div id="menu">

…

…

</div>

<script>

var initdone = 0;

var initialTop = 0;

var scrolldone = 0;


function initialise(){

               if (scrolldone==0){

                              initialTop = parseInt(menu.style.top);

                              initdone = 1;

                              }

               }


window.onscroll = function() {

               if (initdone == 0) {

                              initialise()

               }

              

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;


               if (scrollTop > initialTop) {

                              menu.style.top = scrollTop+"px";

               }

               else{

                              menu.style.top = initialTop+"px";

                              }

scrolldone = 1;

};

</script>

Praticamente vorrei che scorrendo la pagina, solo la barra del menù rimanga sempre al top di essa.

Lo script è corretto?

Perché non funziona?

Grazie
 
Ultima modifica di un moderatore:

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
28
Dipende com'è strutturato il tuo sito.
Vedi se ti basta così:
HTML:
<!DOCTYPE>
<html>
    <header>
        <title> Menu </title>
        <style>
            .nav-container{
            position:fixed;
            width:99%;
            height:50px;
            text-align:center;
            background-color:orange;
            top: 0px;
            }
            
            li{
            display:inline;
            }
            a.menu{
            text-decoration:none;
            padding: 5px;
            }
            #container{
                position:absolute;
                margin-top:60px;
                z-index:-1;
            }
        </style>
    </header>
    <body>
        <div class="nav-container">
            <div class="nav">
                <ul>
                    <li><a href="#" class="menu"> Home </a></li>
                    <li><a href="#" class="menu"> Contatti </a></li>
                    <li><a href="#" class="menu"> Chi siamo </a></li>
                </ul>
            </div>
        </div>
        
        <div id="container">
         <div>
            <p> Ciao mamma guarda come mi diverto</p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p><p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p><p> Ciaofijvevijwieovjijvijeowvijejivckscm </p><p> Ciaofijvevijwieovjijvijeowvijejivckscm </p><p> Ciaofijvevijwieovjijvijeowvijejivckscm </p><p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
            <p> Ciaofijvevijwieovjijvijeowvijejivckscm </p>
         </div>
            
        </div>
    </body>
</html>
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, condivido la soluzione css di Ibernato ma devo fare un paio di appunti sul tuo javascript :
- non puoi assegnare lo stesso id a più di un elemento
- la variabile menu che usi in emtrambe le funzioni non è dichiarata
- nella funzione initsialise ti riferisci allo style top che neanche è dichiarato
- l'indentazione del codice è orrenda ma questo è soggettivo
studio pratica pratica studio e in men che non si dica gli script inizieranno a funzionare :)


 

Maria78

Nuovo Utente
4 Feb 2017
8
0
1
43
Grazie proverò a mettere i vostri consigli. E' vero mi manca la pratica, sapete indicare qualche esercizi da fare o qualche guida.
Ciao
 

Maria78

Nuovo Utente
4 Feb 2017
8
0
1
43
Si lo conosco. Mi manca poter fare un pò di pratica "da vero". Cmq ti ringrazio.
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
28
La pratica la si fa testando quello che si impara leggendo. =)
In bocca al lupo Maria.
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
A Javascript Nascondere Div con id numerico dinamico Javascript 18
S [javascript] visualizzare/nascondere div Javascript 3
C [Javascript] Mostrare un div cliccando una checkbox Javascript 0
M Ottenere i valori di una proprietà su un array di oggetti (es. DIV) in JavaScript Javascript 7
T [Javascript] Far partire script al raggiungimento del div/section Javascript 0
G [Javascript] scrollare div Javascript 2
T [Javascript] Refresh div Javascript 1
trattorino [Javascript] Blocco div in base all'altezza Javascript 1
L [Javascript] Come inserire codice dopo un div in automatico Javascript 2
S [Javascript] Aggiornare solo un DIV una sola volta con un click di un bottone Javascript 9
V javascript - cambiare immagine di sfondo di un div Javascript 3
U [Javascript] div linkabile che apre link e scompare Javascript 3
E [Javascript] problema con margine quando viene mostrato div Javascript 0
F [Javascript] Inserire il contenuto di una pagina in un Div Javascript 2
Daniele450 [Javascript] Linkare ogni sigola voce dello stesso menu ad un div diverso della stessa pagina Javascript 3
E [Javascript] div "si sposta" al caricamento della pagina web Javascript 2
F [Javascript] Div ed iframe che adatta altezza in base al contenuto Javascript 1
S [Javascript] Nascondere e rendere visibile un Div cliccando su due link Javascript 2
H Eliminare div creato da javascript Javascript 1
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
M Javascript interno al DIV Javascript 5
D Aggiungere javascript a div Javascript 1
C in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli Javascript 7
J Php/Javascript div a scomparsa Javascript 2
P copiare il contenuto di un DIV con javascript/ajax Javascript 0
LaKanka Javascript e php mostra/nascondi div PHP 6
L Javascript e tag <DIV> Javascript 2
gladenko Javascript e accesso alle proprietà dei div Javascript 5
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 0
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6

Discussioni simili