Menu che scorre insieme alla pagina

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="http://www.mrwebmaster.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
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
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="http://www.mrwebmaster.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
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
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
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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()">
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
@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
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
A me non scrolla nemmeno. Eppure non dovrebbe essere difficile come operazione, mannaggia.
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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>
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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.
 

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
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.
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
 

Marco_88

Utente Attivo
4 Dic 2014
150
0
0
Roma
batwebit.blogspot.it
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:

WottaFacca

Utente Attivo
20 Mar 2015
134
0
0
Desenzano d/G
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>