menù fixed

K

Kirss KirSolo

Nuovo Utente
4 Nov 2013
25
0
0
riporto qui la mia questione, pensavo si potesse fare con css, però sembra che cè bisogno di js.

Nel mio sito strutturato così:
Codice: 
<div id="header"> ...</div>
<div id="menu"> ..</div>
<div id="main"> 
               ...
                ...
</div>

Vorrei che il menù rimanga fisso quando scrollo la pagina. Per capirci meglio:
1)All'inizio della visualizzazione, quindi in no-scroll, gli elementi visibili sono header, menù , e main ec...
2) Invece quando scrollo, vorrei che il menù rimanesse in evidenza, però andando nel margine superiore del browser, non facendolo rimanere nella stessa posizione della finestra del browser. Spero che abbiate capito.

In css con position:fixed mi rimane fisso il menù in evidenza, però alla stessa posizione della finestra, io vorrei che si attaccasse al margine superiore del browser.

Come posso fare?
 
criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova questo esempio
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>esempio</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            $(document).ready(function(){
                var yOffset = $("#contentmenu").offset().top;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > yOffset) {
                        $("#contentmenu").css({
                            'top': 0,
                            'position': 'fixed'
                        });
                    } else {
                        $("#contentmenu").css({
                            'top': yOffset + 'px',
                            'position': 'static'
                        });
                    }
                });
            });
            
        </script>
        <style>
            #header {
                height:90px;
                background-color: black;
            }
            #menu {
                width: 220px;
                float: left;
                height: 1400px;
            }
            #contentmenu {
                width: 220px;
                background-color: red;    
                height: 400px;            
            }
            #main {
                width: 820px;
                height: 1400px;
                float: left;
                background-color: gray;                
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="menu">
            <div id="contentmenu">
                menu
            </div>
        </div>
        <div id="main"> 
            main
        </div>
    </body>
</html>
per semplificare il codice ho incluso la libreria jquery
 
K

Kirss KirSolo

Nuovo Utente
4 Nov 2013
25
0
0
criric ha scritto:
Ciao, prova questo esempio
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>esempio</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            $(document).ready(function(){
                var yOffset = $("#contentmenu").offset().top;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > yOffset) {
                        $("#contentmenu").css({
                            'top': 0,
                            'position': 'fixed'
                        });
                    } else {
                        $("#contentmenu").css({
                            'top': yOffset + 'px',
                            'position': 'static'
                        });
                    }
                });
            });
            
        </script>
        <style>
            #header {
                height:90px;
                background-color: black;
            }
            #menu {
                width: 220px;
                float: left;
                height: 1400px;
            }
            #contentmenu {
                width: 220px;
                background-color: red;    
                height: 400px;            
            }
            #main {
                width: 820px;
                height: 1400px;
                float: left;
                background-color: gray;                
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="menu">
            <div id="contentmenu">
                menu
            </div>
        </div>
        <div id="main"> 
            main
        </div>
    </body>
</html>
per semplificare il codice ho incluso la libreria jquery
Clicca per allargare...

Perfetto, grazie mille era proprio questo l'effetto che volevo.
Lo riscrivo semplificando nel mio esempio, se servisse a qualcuno :)
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>esempio</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            $(document).ready(function(){
                var yOffset = $("#menu").offset().top;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > yOffset) {
                        $("#menu").css({
                            'top': 0,
                            'position': 'fixed'
                        });
                    } else {
                        $("#menu").css({
                            'top': yOffset + 'px',
                            'position': 'static'
                        });
                    }
                });
            });
            
        </script>
        <style>
            #header {
                height:90px;
                background-color: black;
            }
            #menu {
                width: 1200px;
                background-color: red;    
                height: 50px;            
            }
            #main {
                width: 820px;
                height: 1400px;
                float: left;
                background-color: gray;                
            }
        </style>
    </head>
    <body>
        <div id="header">header</div>
        <div id="menu"> menu navv</div>
		<div id="main"> main</div>
    </body>
</html>

js è l'unico modo vero?
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
K menù fixed HTML e CSS 17
G Elementi Menù orizzontali HTML e CSS 2
psikolele Dropdown menù HTML e CSS 2
G Menù a tendina di ricerca con query PHP 1
F menù select dinamico da db in php PHP 3
L Menù con switch case C/C++ 1
J Richiama descrizione da menù PHP 11
Z Menù di navigazione responsivo HTML e CSS 0
R Barra del menù principale decentrata Joomla 4
M Stringa con spazi nel menù a tendina PHP 4
A Menù a tendina collegato a database PHP 13
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1
Tommy03 Contenitore non si nasconde dietro al menù HTML e CSS 1
Tommy03 Due menù nella stessa app Sviluppo app per Android 0
C [PHP] Form con Inserimento dati dalla maschera e un menù a discesa che prende i dati dal db PHP 1
C [PHP] Form inserimento più menù a discesa PHP 9
V Menù CSS da file in cartella esterna HTML e CSS 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
S [PHP] menù a tendina che stampi voce scelta in precedenza PHP 1
F [HTML] Responsive menù CMS (Content Management System) 0
A [PHP] menù con links esterni PHP 6
D Come inserire opzioni menù prelevandole dal database con PHP ? PHP 12
F [HTML] li menù width HTML e CSS 3
T [Javascript] un form con select dinamica che funzioni da menù... Javascript 2
ecosito [Wordpress] La barra del menù mi nasconde la parte alta delle pagine WordPress 0
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
F Problema hover voce di menù Javascript 2
F Nascondere menù onclick sottovoce jQuery 0
F Active menù HTML e CSS 2
A menù a tendina aiuto PHP 1
M Menù a tendina editabile HTML e CSS 0
P problema con tendina del menù, scompare sotto i contenuti HTML e CSS 7
F Link menù attivo categoria PHP 2
MarcoGrazia Breadcrumbs, menù a briciole di pane Snippet PHP 2
I nav menù HTML e CSS 13
LuigiDonato Problema Visualizzazione Menù HTML e CSS 17
C Menù scomparso WordPress 2
V Posizionare Iframe e menù a discesa HTML e CSS 1
F z-index menù HTML e CSS 4
Tommi Script per menù Javascript 16
Licantropo esportare tags e menù Joomla 0
F Menù a tendina Joomla 4
L [PHP] 3 menù Select OPTION consecutivi PHP 1
Carlito's Menù jQuery 1
E Menù da modificare HTML e CSS 2
H Menù a discesa contenente dati db, la scelta dal menù deve essere inviata in un altro db. PHP 1
andreaco Problema menù a scomparsa laterale HTML e CSS 10
L Inserisco 2 menù e vedo sempre il primo PHP 0
E Problemi con menù a cascata HTML e CSS 0
N Problemi chiusura menù laterale Javascript 5

Discussioni simili

Alto Basso