Div fissato in alto

Campastic

Campastic

Nuovo Utente
4 Giu 2016
4
1
3
Milan, Italy
Buonasera a tutti,
premetto:
spero di aver scelto la sezione giusta; sto imparando sia javascript sia html e CSS anche se penso di avere le basi; sto chiedendo aiuto dopo una giornata a sbatterci la testa.

In parole povere, voglio che il mio div (quello che sarà il menu principale!) rimanga fissato in alto.

Ecco le porzioni di CSS che sono interessate:

Codice: 
.fixed {
position: fixed;
top: 0px;
}

/*** Nav ***/
#nav {
position:relative;
background: blue;
height: 50px;
margin-top: 3%;
margin-left: 0px;
margin-right: 0px;
width: 100%;
margin-bottom:10%;
}


Nell'index.html invece ho:
Codice: 
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(function() {
    var nav = $("#nav");
    var posizione = nav.position();
  $(window).scroll(function(){
      
     if ($(window).scrollTop()>posizione.top){
                { nav.addClass("fixed");}
     }else{
             { nav.removeClass("fixed");}
     }
 });   

});

</script>
</head>

<body>



<div id="nav"></div>
...

In teoria con lo script sto cercando di assegnare al div "nav" la classe fixed quando va a "sbattere" con lo il top della finestra, e quando invece ritorna sotto il top della finestra, toglierli la classe fixed.
La classe fixed servirebbe proprio a fissarla in top nella finestra, così da portarmi il meù dietro per tutta la pagina.


Ovviamente questo, non succede XD

Chiedo cortesemente il vostro aiuto, e mi scuso ancora se ho sbagliato qualcosa!
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, credo sia un problema di priorità dei css : le istruzioni date all'id hanno la priorità su quelle date alla classe.
Nel tuo caso assegni la position:relative; all'id nav. Direi di toglierla. Modifica anche il javascript : usi troppe parentesi graffe nell if else, basta cosi
Codice: 
if ($(window).scrollTop() > posizione.top) {
                nav.addClass("fixed");
            } else {
                nav.removeClass("fixed");
            }
 
Campastic

Campastic

Nuovo Utente
4 Giu 2016
4
1
3
Milan, Italy
Grazie per la risposta!
Comunque:
pulendo il codice dalle graffe e togliendo al #nav il "position:relative", ora il div effettivamente si muove!
Purtroppo però, prima di diventare "fixed" dovrebbe arrivare al top window. e ovviamente questo non avviene!
Il div #nav ha un margin-top: 3% per distaccarlo dal top window. Dunque vorrei che solo quando questa distanza diventa un 0%, il div #nav diventa fixed!
Per questo motivo, l'if che ha come condizione "(window).scrollTop()>posizione.top" nel codice:
Codice: 
if ($(window).scrollTop()>posizione.top){
                nav.addClass("fixed");
     }else{
              nav.removeClass("fixed");
     }


Ti faccio vedere il frame per frame (o quasi):

2n1ddlz.png

1. index.html all'apertura

30l06c3.png

2. scrollando di poco, la barra si va a fissare e mi segue nello scroll. Ma nella posizione originale, non nel top window.
(Applicherei la stessa logica, per il logo, così da bloccarsi anche lui al top e seguire lo scroll)

10nujx1.png



Grazie per eventuali risposte e scusatemi se ho messo troppi dettagli per un problema, probabilmente, banale!
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non è proprio cosi banale, prova questo esempio che avevo fatto tempo fa, ci avevo messo qualche ora
HTML: 
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("div#menu").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("div#menu").css({
                            'width': $("div#container").width() * 0.3,
                            'top': 0,
                            'left': $("div#menu").offset().left,
                            'position': 'fixed'
                        });
                    } else {
                        $("div#menu").css({
                            'width': "100%",
                            'top': yOffset + 'px',
                            'left': 0,
                            'position': 'static'
                        });
                    }
                });
            });

        </script>
        <style>
            html body {
                text-align: center;
                background-color: #E4E4E4;
            }
            div#container {
                width: 90%;
                overflow: hidden;
                margin:auto;
                background-color: #FFF;
            }
            div#header {
                height: 120px;
                background-color: #0d3b85;
            }
            div#menusx {
                position: static;
                width:30%;
                overflow: hidden;
                float:left;
            }
            div#logo {
                height:150px;
            }
            div#menu {
                position: static;
                height: 250px;
                background-color: #0d3b85;
            }
            div#content {
                width:70%;
                float: right;
                height:1500px;
            }
            div#footer {
                height: 120px;
                background-color: #0d3b85;
                clear:both;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="menusx">
                <div id="logo"></div>
                <div id="menu"></div>
            </div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>
 
Campastic

Campastic

Nuovo Utente
4 Giu 2016
4
1
3
Milan, Italy
Grazie mille per questo codice!
L'ho studiato un po' cercando di capirlo per bene..
Ho apportato alcune modifiche allo script per adattarlo alle mie esigenze:
Nell'index.html:
Codice: 
<script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("div#menu").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("div#menu").css({
                            'width': "100%",
                            'top': 0,
                            'left': $("div#menu").offset().left,
                            'position': 'fixed'
                        });
                    } else {
                        $("div#menu").css({
                            'width': "100%",
                            'top': yOffset + 'px',
                            'left': 0,
                            'position': 'static'
                        });
                    }
                });
            });

        </script>
1. Script per il div del menu.
Codice: 
<script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("#logo").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("#logo").css({
                            'top': 0,
                            'left': $("#logo").offset().left,
                            'position': 'fixed',
                            'z-index': 1,      
                        });
                    } else {
                        $("#logo").css({
                         
                            'top': yOffset + 'px',
                            'left': 0,
                            'position': 'static'
                        });
                    }
                });
            });

        </script>
2. Script per il logo!

...con i relativi CSS...

Codice: 
#menu {
                position: static;
                height: 50px;
                width:100%;
                background-color: #0d3b85;
               
            }
            #logo{
                position: static;
                margin: 0 auto;
                margin-top: 10px;
                margin-bottom: 10px;
                width: 150px;
                height: 150px;
                background-image:url(../img/logo.png);
                background-size:cover;
                background-repeat: no-repeat;
                z-index:20;
}

Funziona tutto bene! Grazie mille!
L'unico problema, è che durante lo scroll per un solo istante, il logo va ad inserirsi per metà sotto il div del menu!
Poi, quando il div #logo va ad ancorarsi al top con lo script, ritorna in primo piano sul menù...
Ho provato anche ad utilizzare lo z-index, impostando un valore massimo a #logo e minore al #menu, ma niente...

Grazie mille!!
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
E Creare un testo trasparente dietro un div HTML e CSS 5
F Div position: fixed si deve fermare quando raggiunge un altro div, oppure deve scomparire. Soluzioni? Javascript 0
M Accordion menu e posizione div HTML e CSS 0
P jquery refresh div non funziona Javascript 0
P refresh div + scrittura/lettura dal db Javascript 1
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
M Unire 2 funzioni per l'invio di un form e con l'apertura di un div Javascript 0
Cosina Nascondere div di default jQuery 2
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
A inserire variabile php colore in div html PHP 2
J Far comparire e scomparire un div con un select Javascript 1
T Far sparire dalla pagina div che saranno inseriti successivamente jQuery 0
E Div che scompare con scroll jquery Javascript 0
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
Stefano Migotto Creazione di un div con php o js PHP 9
felino Bootstrap alert: usare lo stesso div per due messaggi consecutivi jQuery 1
S Visibilità div in PHP PHP 1
L [Javascript]Scorrere div con frecce avanti-indietro Javascript 0
P [Javascript] Aprire Link in Div e pagina Dinamica Javascript 0
ANDREA20 [HTML] problema con i div HTML e CSS 10
Giacomo Boccherini [HTML] il div non si ottimizza HTML e CSS 1
Cosina [PHP] Scrivere dati in un div specifico PHP 3
R [PHP] [Javascript] Link a DIV id di un' altra pagina PHP 4
trattorino [Javascript] onclick su piu div insieme Javascript 1
trattorino ritornare al div precedente jQuery 2
L [Javascript]Aprire div con click e chiuderlo con altro pulsante Javascript 2
V [Javascript] Visualizzare o nascondere div figlio Javascript 4
E [HTML] Allineare foto a un tag DIV verticalmente HTML e CSS 0
E [HTML] Allineamento immagine agli angoli inferiori di un div HTML e CSS 12
A JAVASCRIPT ELIMINAZIONE DIV DINAMICO SU SITO Offerte e Richieste di Lavoro e/o Collaborazione 3
Andrea_Ventura [HTML] Creare un DIV con slideshow HTML e CSS 5
M [HTML] Invertire DIV su dispositivi mobile HTML e CSS 2
A Javascript Nascondere Div con id numerico dinamico Javascript 18
I [HTML] Slideshow si sovrappone a <div> HTML e CSS 14
paloppa Div che appare appena due form sono compilati jQuery 16
S [javascript] visualizzare/nascondere div Javascript 3
S [HTML] Centrare verticalmente il testo in div HTML e CSS 2
G [HTML] Modificare ordine dei div in mobile responsive HTML e CSS 5
D [HTML] Frameset e Div HTML e CSS 8
G [HTML] Impostare dimensione immagini in un div HTML e CSS 2
L php - pulsante premuto che mostra #div PHP 3
S [HTML] Div visibile o nascosto al passaggio del mouse HTML e CSS 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
C Nascondere un div al click di una casella Ajax 1
S [HTML] Distanza esatta tra due div HTML e CSS 7
G [HTML] Posizionamento testo in un div HTML e CSS 5
trattorino css solo se richiama un class di un div HTML e CSS 1
G [HTML] Bordo bianco sotto immagine in un Div HTML e CSS 1

Discussioni simili

Alto Basso