menù fixed

Kirss KirSolo · 24 Feb 2014

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 · 24 Feb 2014

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

Kirss KirSolo · 24 Feb 2014

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

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?

Cerca

Cerca

menù fixed

Kirss KirSolo

Nuovo Utente

criric

Super Moderatore

Kirss KirSolo

Nuovo Utente

Discussioni simili