Div fissato in alto

Campastic · 16 Nov 2016

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 · 17 Nov 2016

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 · 17 Nov 2016

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):

1. index.html all'apertura

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)

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

criric · 17 Nov 2016

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 · 17 Nov 2016

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!!

Cerca

Cerca

Div fissato in alto

Campastic

Nuovo Utente

criric

Super Moderatore

Campastic

Nuovo Utente

criric

Super Moderatore

Campastic

Nuovo Utente

Discussioni simili