[Javascript] div sempre al top

Maria78 · 12 Feb 2017

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

Ibernato · 12 Feb 2017

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>

criric · 13 Feb 2017

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 · 14 Feb 2017

Grazie proverò a mettere i vostri consigli. E' vero mi manca la pratica, sapete indicare qualche esercizi da fare o qualche guida.
Ciao

Ibernato · 14 Feb 2017

Ti posso consigliore questo sito http://www.w3schools.com/html/

Maria78 · 14 Feb 2017

Si lo conosco. Mi manca poter fare un pò di pratica "da vero". Cmq ti ringrazio.

Ibernato · 15 Feb 2017

La pratica la si fa testando quello che si impara leggendo. =)
In bocca al lupo Maria.

Cerca

Cerca

[Javascript] div sempre al top

Maria78

Nuovo Utente

Ibernato

Utente Attivo

criric

Super Moderatore

Maria78

Nuovo Utente

Ibernato

Utente Attivo

Maria78

Nuovo Utente

Ibernato

Utente Attivo

Discussioni simili