Menu che scorre insieme alla pagina

Marco_88

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
Ciao a tutti, ho trovato questo script dalle guide di Mr Webmaster che è quello che stavo esattamente cercando:

Codice: 
<html>
<head>
<title>Menu che scorre insieme alla pagina</title>

<script language="javascript">
<!--

var timer = 0;


function MyMenu()

{

document.getElementById('menu').style.pixelTop = document.body.scrollTop;
timer = setTimeout("MyMenu()", 1);
}


function Stop()

{

clearTimeout(timer);
}

//-->
</script>


</head>


<body onload="MyMenu()" onunload="Stop()">


<div id="menu" style="position: Absolute;">
<b>Menu</b><br>
<a href="http://www.lukeonweb.net">lukeonweb.net</a><br>
<a href="http://www.ducatidreams.net">Ducati Dreams Club</a><br>
<a href="https://www.mrw.it">MR Webmaster</a><br>
</div>


<p align="center">Scorri la pagina</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>


</body>
</html>


Non me ne intendo ancora di Javascript , e vorrei modificare lo scroll per far si che anziché partire dal body e cioè dall'inizio della pagina, parta da metà pagina in un contenitore che ho già pronto.
Avete qualche consiglio su come iniziare?

Tnx
 
Scusa la mia ignoranza, ma non sono riuscito a capire cosa vuoi fare.

Tu vuoi un menu che, con lo scroll della pagina, rimanga fissato al centro della pagina oppure che parta dal centro della pagina e se ti muovi si muove anche lui?

comunque potresti provare in questo modo

HTML: 
<html>
<head>
<title>Menu che scorre insieme alla pagina</title>

<script language="javascript">
<!--

var timer = 0;


function MyMenu()

{

document.getElementById('menu').style.pixelTop = document.body.scrollTop;
timer = setTimeout("MyMenu()", 1);
}


function Stop()

{

clearTimeout(timer);
}

//-->
</script>


</head>


<body onload="MyMenu()" onunload="Stop()">


<div id="menu" style="position: fixed; margin-top: 25%;">
<b>Menu</b><br>
<a href="http://www.lukeonweb.net">lukeonweb.net</a><br>
<a href="http://www.ducatidreams.net">Ducati Dreams Club</a><br>
<a href="https://www.mrw.it">MR Webmaster</a><br>
</div>


<p align="center">Scorri la pagina</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>


</body>
</html>

se invece vuoi che si muova anche il menu devi cambiare il valore di position da fixed ad absolute
 
Ciao, provo a spiegarmi meglio: il menu così concepito scorre su tutta la pagina (body) il problema è che quando sono in cima alla pagina mi trovo il menu che sovrasta l'header e invece vorrei che lo scroll parta solo quando raggiunge il contenitore del menu, che non si trova in cima del body ma a metà body e che quindi scorra giù da li in poi.
In forma verbale: " Rimani bloccato sul contenitore a metà body div menu e solo una volta raggiunto fai lo scroll in giù, se risalgo, bloccati nuovamente nel div menu".
Spero di aver reso XD
 
Allora mi spiace ma purtroppo non credo di riuscire ad aiutarti.

Ho avuto anch'io dei probelmi con un'esercizio in cui dovevo bloccare il menù un punto della pagina, ma rimane fisso per tutto il tempo e quindi non sono riuscito a farlo muovere con lo scroll, quindi ho dovuto "sistemarla" in modo che comunque avrebbe avuto un minimo di senso xD
 
Eccolo! L'ho trovato ed è proprio in questa pagina del forum! Mi serve esattamente la funzione del contenitore del banner pubblicitario che è posizionato tra un post e l'altro: E' fisso da un certo punto in poi, appena scendi giù il contenitore segue l'andamento dello scroll! Magari qualcuno dello staff può aiutarmi a replicarlo...attendo fiducioso
 
In alternativa ho trovato questo che però originariamente era destinato ai banner pubblicitari e l ho modificato così, ora il menu è posizionato esattamente dove volevo, stranamente però quando scrollo in giù rimane bloccato in quella posizione (non scrolla anche lui)...



Codice: 
<script type="text/javascript">
var SB;
function ScrollBanOK()
{
	document.getElementById("menu").style.position = "absolute";
	document.getElementById("menu").style.top = document.body.scrollTop;
	document.getElementById("menu").style.marginTop = "1380px";
	

	SB = window.setTimeout("ScrollBanOK()", 0);
}
function ScrollBanNO()
{
	window.clearTimeout(SB);
}
</script>

<body onload="ScrollBanOK()" onunload="ScrollBanNO()">
 
@WottaFacca

No, non va neanche quello...

Adesso l'ho modificato così, mettendo il window.screen.height:

Codice: 
<script type="text/javascript">
var SB;
function ScrollBanOK()
{
	document.getElementById("menu").style.position = "absolute";
	document.getElementById("menu").style.top = document.div.scrollTop;
	document.getElementById("menu").style.marginTop = (window.screen.height - 1340) + "px"; 
	

	SB = window.setTimeout("ScrollBanOK()", 1);
}
function ScrollBanNO()
{
	window.clearTimeout(SB);
}
</script>

Però ancora non parte lo scroll
 
Non saprei, ho provato a modificare qualcosa con l'ultimo script che hai postato ma nada, riesco a far scrollare il menù, ma purtroppo non parte dal centro della pagina come vuoi te.
 
Marco_88 ha scritto:
A me non scrolla nemmeno. Eppure non dovrebbe essere difficile come operazione, mannaggia.
Clicca per allargare...

Io posso dirti che se metti
Codice: 
 position: fixed;
il menu viene giù con lo scroll della pagina, però è proprio fissato nella posizione in cui lo inserisci, quindi se lo fai partire dal centro della pagina lui rimarrà sempre al centro della pagina
 
Ciao prova anche questo esempio, ho usato jquery
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>
 
Adesso ho solo un altro problema, lo scroll in verticale funziona perfettamente, però se con il magic mouse apple faccio lo scroll laterale mi sposta il div menu fuori dal contenitore principale (che nel mio caso si chiama è una class "960").

Questo è il codice così come è modificato.




HTML: 
<div class="960">
   <div id="menucategorie">
      <div id="menu">
           <nav>

 <script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("#menu").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("#menu").css({
                            'width': $(".960").width() * 0.3,
                            'top': 0,
                            'left': $("#menu").offset().left,
                            'right': $("#menu").offset().right,
                            'position': 'fixed'
                        });
                    } else {
                        $("#menu").css({
                            'width': "100%",
                            'top': yOffset + 'px',
                            'left': 0,
                            'right': 0,
                            'position': 'static'
                        });
                    }
                });
            });
        </script>
      
       </nav>
     </div>
   </div>
</div>
 
Aggiungi nel css, alle regole del body

Codice: 
overflow-x: hidden;

così lo scroll laterale è bloccato e non si può più fare

Dimmi se ti va bene in questo modo :)
 
No, si muove lo stesso. Fino a quando non raggiungo l'elemento #menu, lo scroll laterale è bloccato, appena il #menu si "slega" e diventa "fixed" lo scrolling laterale si attiva.
Credo che sia il body a muoversi lateralmente e invece il div menu è appunto bloccato nella posizione fissa.
 
Marco_88 ha scritto:
No, si muove lo stesso. Fino a quando non raggiungo l'elemento #menu, lo scroll laterale è bloccato, appena il #menu si "slega" e diventa "fixed" lo scrolling laterale si attiva.
Credo che sia il body a muoversi lateralmente e invece il div menu è appunto bloccato nella posizione fissa.
Clicca per allargare...

Se puoi, scrivi il codice che hai te, oppure metti il link della pagina, solo per vedere come funziona e per capire meglio come bisogna fare
 
No purtroppo non ho il link perché sto lavorando in locale, quindi ti copio e incollo il codice di interesse.

HTML: 
<div id="menucategorie">
   <!---------------------------------------  Nuovo menu di navigazione per categorie  -------------------------------->
   
 <h2 style="padding:0 0 10px 0px; text-align:center; font-size: 30px; margin-top: 30px;"><?php echo $labels["l_categorie"]; ?></h2> 
 
    
<ul id="icons_bar">

  <li class="icons_bar" style="margin:40px 0px 0px 16px;"><img src="http://forum.mrwebmaster.it/images/immobili.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:40px 0px 0px 100px"><img src="http://forum.mrwebmaster.it/images/impianti.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:60px 0px 0px 80px"><img src="http://forum.mrwebmaster.it/images/auto.gif" width="125px" height="55px"/></li>
  <li class="icons_bar" style="margin:40px 0px 0px 75px"><img src="http://forum.mrwebmaster.it/images/prodottifiniti.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:60px 0px 0px 95px"><img src="http://forum.mrwebmaster.it/images/attrezzature.gif" width="105px" height="62px"/></li>

</ul>   

   

        <script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("#menu").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("#menu").css({
                            'width': $(".d960").width() * 0.3,
                            'top': 0,
                            'left': $("#menu").offset().left,
                            'right': $("#menu").offset().right,
                            'position': 'fixed',
                            
                        });
                    } else {
                        $("#menu").css({
                            'width': "100%",
                            'top': yOffset + 'px',
                            'left': 0,
                            'right': 0,
                            'position': 'static'
                        });
                    }
                });
            });
        </script>




<div id="menu" style="z-index:99;">

   <div id="nav">
      
        <ul>
			<li>
				<a href="#">Immobili</a>
					<ul class="fallback">
						   <li><a href="/commerciale">Commerciale</a>
						   <li><a href="/industriale">Industriale</a>
						   <li><a href="/residenziale">Residenziale</a>
						   <li><a href="/terreni">Terreni</a>
                     
     
				       </ul>
			</li>
                
           
                    <li>
						<a href="#">Impianti</a>
						<ul class="fallback">
						   <li><a href="/industria-chimica-e-farmaceutica">Chimica</a>
						   <li><a href="/dolciario">Dolciario</a>
						   <li><a href="/industria-alimentare-e-delle-bevande">Alimentare</a>
						   <li><a href="/lavorazione-della-carta">Cartario</a>
						 


				                </ul>
		    </li>
			
		
			
                    <li>
						<a href="#">Automezzi</a>
						<ul class="fallback">
						   <li><a href="/autocarri">Autocarri</a>
						   <li><a href="/autovetture">Autovetture</a>
						   <li><a href="/lusso">Lusso</a>
						   <li><a href="/mezzi-opera">Mezzi d'opera</a>
						   <li><a href="/motoveicoli">Motoveicoli</a>
						   <li><a href="/autocarri">Autocarri</a>
						   <li><a href="/rimorchi">Rimorchi</a>
						   
							
						</ul>
		 </li>
			
				
		 
                     <li>
						<a href="#">Prodotti Finiti</a>
						<ul class="fallback">
						     <li><a href="/prodotti-finiti">Prodotti finiti</a>
						
						</ul>
		 </li>
					
			
					
			
                   <li>
						<a href="#">Attrezzature</a>
						<ul class="fallback">
						
						</ul>
		</li>
                   
            </ul>
		 
		 
		 </nav>	
	</div>
</div>



E questi sono i css

HTML: 
body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:auto;
	padding:0;
	color:#333;
	background: url('../images/body_bg.png') center repeat-y;

	
}


.d960 {
	margin:0 auto;
	width:960px;
}



/***** Div Categorie ******/


#menucategorie {
	width:100%; 
	border-bottom: solid 2px #003B79; 
	background: none; 
	text-align:center; 
	margin-top:0px; 
	min-height:400px;
	max-height:400px;
	overflown:hidden;
}


/************* Nuovo Menu Nav *************/


#nav {background: transparent; width: 950px; padding:0px; margin-left:-20px;margin-top:0px; text-align:center; z-index:999; overflown:hidden;}
#nav ul {text-align:center;background: #396696;  font-size:18px; width: 100%;}
#nav ul li {float:left;display:inline;background:#396696; width: 165px; height: 32px; padding: 10px; line-height:15px;}
#nav ul li:hover {background:#c2c2c2;}
#nav ul li a {display:block;padding:10px 0px;color:#ffffff;}
#nav ul li ul {position:absolute;width:160px;background:transparent;}
#nav ul li ul li {width:165px;margin-left:-50px;}
#nav ul li ul li a {display:block;padding:10px 10px;color:#ffffff;}
#nav ul li ul li:hover a {background:transparent;}
#nav ul li ul.fallback {display:none;  -webkit-transition: block 0.4s; /* For Safari 3.1 to 6.0 */ }
#nav ul li:hover ul.fallback {display:block;}
#nav li {display:block;}
 
Ultima modifica:
Ovviamente quello che vedo io non è il massimo, visto che mancano le immagini, però non fa neanche l'effeto di seguire la pagina, quindi mi sa che manca qualcosa

HTML: 
<html>

<head> <title> esempio </title> 

<style>
body {

	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	margin:auto;
	padding:0;
	color:#333;
	background: url('../images/body_bg.png') center repeat-y;
	
	
}


.d960 {
	margin:0 auto;
	width:960px;
}



/***** Div Categorie ******/


#menucategorie {
	width:100%; 
	border-bottom: solid 2px #003B79; 
	background: none; 
	text-align:center; 
	margin-top:0px; 
	min-height:400px;
	max-height:400px;
	
}


/************* Nuovo Menu Nav *************/


#nav {

 background: transparent;
 width: 950px;
 padding:0px;
 margin-left:-20px;
 margin-top:0px;
 text-align:center;
 z-index:999;
 overflown:hidden;
 
}

#nav ul {

text-align:center;
background: #396696;
font-size:18px;
width: 100%;

}

#nav ul li {
 
float:left;
display:inline;
background:#396696;
width: 165px;
height: 32px;
padding: 10px;
line-height:15px;

}
#nav ul li:hover {

background:#c2c2c2;

}

#nav ul li a {

display:block;
padding:10px 0px;
color:#ffffff;

}

#nav ul li ul {

position:absolute;
width:160px;
background:transparent;

}

#nav ul li ul li {

width:165px;
margin-left:-50px;

}

#nav ul li ul li a {

display:block;
padding:10px 10px;
color:#ffffff;

}

#nav ul li ul li:hover a {

background:transparent;

}

#nav ul li ul.fallback {

display:none;
-webkit-transition: block 0.4s; /* For Safari 3.1 to 6.0 */

}

#nav ul li:hover ul.fallback {

display:block;

}

#nav li {

display:block;

}



</style>


</head>
<body>

<div id="menucategorie">
   <!---------------------------------------  Nuovo menu di navigazione per categorie  -------------------------------->
   
 <h2 style="padding:0 0 10px 0px; text-align:center; font-size: 30px; margin-top: 30px;"><?php echo $labels["l_categorie"]; ?></h2> 
 
    <ul id="icons_bar">

  <li class="icons_bar" style="margin:40px 0px 0px 16px;"><img src="http://forum.mrwebmaster.it/images/immobili.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:40px 0px 0px 100px"><img src="http://forum.mrwebmaster.it/images/impianti.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:60px 0px 0px 80px"><img src="http://forum.mrwebmaster.it/images/auto.gif" width="125px" height="55px"/></li>
  <li class="icons_bar" style="margin:40px 0px 0px 75px"><img src="http://forum.mrwebmaster.it/images/prodottifiniti.gif" width="80px" height="80px"/></li>
  <li class="icons_bar" style="margin:60px 0px 0px 95px"><img src="http://forum.mrwebmaster.it/images/attrezzature.gif" width="105px" height="62px"/></li>

</ul>

   

        <script type="text/javascript">
            $(document).ready(function () {
                var yOffset = $("#menu").offset().top;
                $(window).scroll(function () {
                    if ($(window).scrollTop() > yOffset) {
                        $("#menu").css({
                            'width': $(".d960").width() * 0.3,
                            'top': 0,
                            'left': $("#menu").offset().left,
                            'right': $("#menu").offset().right,
                            'position': 'fixed',
                            
                        });
                    } else {
                        $("#menu").css({
                            'width': "100%",
                            'top': yOffset + 'px',
                            'left': 0,
                            'right': 0,
                            'position': 'static'
                        });
                    }
                });
            });
        </script>




<div id="menu" style="z-index:99;">

   <div id="nav">
      
        <ul>
			<li>
				<a href="#">Immobili</a>
					<ul class="fallback">
						   <li><a href="/commerciale">Commerciale</a>
						   <li><a href="/industriale">Industriale</a>
						   <li><a href="/residenziale">Residenziale</a>
						   <li><a href="/terreni">Terreni</a>
                     
     
				       </ul>
			</li>
                
           
                    <li>
						<a href="#">Impianti</a>
						<ul class="fallback">
						   <li><a href="/industria-chimica-e-farmaceutica">Chimica</a>
						   <li><a href="/dolciario">Dolciario</a>
						   <li><a href="/industria-alimentare-e-delle-bevande">Alimentare</a>
						   <li><a href="/lavorazione-della-carta">Cartario</a>
						 


				                </ul>
		    </li>
			
		
			
                    <li>
						<a href="#">Automezzi</a>
						<ul class="fallback">
						   <li><a href="/autocarri">Autocarri</a>
						   <li><a href="/autovetture">Autovetture</a>
						   <li><a href="/lusso">Lusso</a>
						   <li><a href="/mezzi-opera">Mezzi d'opera</a>
						   <li><a href="/motoveicoli">Motoveicoli</a>
						   <li><a href="/autocarri">Autocarri</a>
						   <li><a href="/rimorchi">Rimorchi</a>
						   
							
						</ul>
		 </li>
			
				
		 
                     <li>
						<a href="#">Prodotti Finiti</a>
						<ul class="fallback">
						     <li><a href="/prodotti-finiti">Prodotti finiti</a>
						
						</ul>
		 </li>
					
			
					
			
                   <li>
						<a href="#">Attrezzature</a>
						<ul class="fallback">
						
						</ul>
		</li>
                   
            </ul>
		 
		 
		 </nav>	
	</div>
</div>  


<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>	
<br><br><br><br><br><br><br><br><br><br>	
<br><br><br><br><br><br><br><br><br><br>	
<br><br><br><br><br><br><br><br><br><br>	
<br><br><br><br><br><br><br><br><br><br>	
<br><br><br><br><br><br><br><br><br><br>		
 
</body>
</html>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
[PHP] Menu a tendina dinamico che non si aggiorna
Risposte
2
Visite
2K
PHP
Max61
M
M
[HTML] Menu a fisarmonica che non funziona in chrome
Risposte
2
Visite
2K
HTML e CSS
marcellino247
M
G
[HTML] mettere menu style smartphone anche sui tablet
Risposte
0
Visite
1K
HTML e CSS
Gio Fra
G
C
Link menu che appaiono con onclick
Risposte
2
Visite
1K
Javascript
colomber
C
L
C++ - Menu che si ripete
Risposte
1
Visite
9K
C/C++
Giovx24
G
felino
WP-Activity: visualizzare voce menu anche agli altri utenti
Risposte
0
Visite
1K
WordPress
felino
felino
asevenx
Gestire posizionamento voci sottomenu che si nascondono
Risposte
1
Visite
1K
HTML e CSS
asevenx
asevenx
A
Voci di menu che non si comportano da link
Risposte
1
Visite
1K
HTML e CSS
Adenina
A
M
Menu a tendina che non inserisce dati nel db
Risposte
8
Visite
2K
PHP
Max61
M
L
menu select che visualizza le cartelle di una cartella
Risposte
16
Visite
2K
PHP
luigi777
L
P
menu orizzontale che scompare dietro una lista
Risposte
2
Visite
2K
HTML e CSS
Paperino78
P
L
pagina che funziona in locale ma non in remoto (MENU seleziona)
Risposte
6
Visite
2K
PHP
luigi777
L
G
contextmenu e funzione che lo attiva
Risposte
1
Visite
2K
Javascript
gasparroa
G
G
menu che si apre al click destro
Risposte
0
Visite
1K
Javascript
gasparroa
G
S
Menu js che apra i link in un iframe
Risposte
1
Visite
2K
Javascript
Majinbu
M
G
Backround menu in css che sparisce al click
Risposte
1
Visite
2K
HTML e CSS
ghisirds
G
V
Checkbox che abilita/disabilità menu a tendina
Risposte
20
Visite
8K
HTML e CSS
PoLe
PoLe
T
problemi con dati menu a tendina
Risposte
2
Visite
1K
HTML e CSS
tregafabio
T
A
menu a tendina php
Risposte
1
Visite
1K
PHP
marino51
marino51
M
Accordion menu e posizione div
Risposte
0
Visite
1K
HTML e CSS
miagy
M
Alto Basso