Menu che resta fisso raggiunta una certa altezza dello scorrimento della pagina

**Basetz** · 11-04-2013, 11:15

Salve a Tutti

stavo cercando nel forum CSS ed ho trovato un esempio di quello che vorrei fare, ma qualcuno ha scritto che la soluzione è il javascript, per cui mi ritrovo a scrivere qui . . .

Sul mio sito ho un Menu, posizionato subito sotto il Banner in alto. Vorrei che il Menu si bloccasse sulla parte superiore dello schermo una volta superato il Banner facendo lo scroll verso il basso

Questo un esempio: https://buy.guildwars2.com/en/ (scorrete verso il basso e vedete l'effetto)

Qualcuno è in grado di aiutarmi?

Grazie

**Grambo** · 11-04-2013, 11:37

codice:

// barra delle pagine che segue lo scroll	
$(function() {
  $(window).scroll(function() {
	 if ($(window).scrollTop()>128){
		 muovi=$(window).scrollTop()-119;
	 }else{
		 muovi=10;
	}
		$('#tuo_div').stop(true, true).
     	animate({
     		top: muovi    
    	}, 'slow', 'linear');
 });	

});

il risultato puoi vederlo qua

tuo_div conterrà il nome del div principale del menù, quello che deve seguire lo scroll della pagina

EDIT: è oviamente jquery

EDIT2: io l'ho fatto che segue lentamente con un'animazione..ma per averlo come nel sito che hai indicato ti basta togliere l'animate

**Basetz** · 11-04-2013, 11:58

Ringrazio e faccio delle prove

**Basetz** · 11-04-2013, 12:21

OK
prove fatte, ma data la mia totale ignoranza, ho delle domande da farti:

- come richiamo la libreria jquery per far funzionare la cosa ?
- dove devo inserire il codice che mi hai dato ?
- prima e dopo il codice devo inserire i tag <script></script> ?

**Grambo** · 11-04-2013, 14:10

Originariamente inviato da Basetz
OK
prove fatte, ma data la mia totale ignoranza, ho delle domande da farti:

- come richiamo la libreria jquery per far funzionare la cosa ?
- dove devo inserire il codice che mi hai dato ?
- prima e dopo il codice devo inserire i tag <script></script> ?

codice:

...
</head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
/* qua inserisci la funzione */
</script>
<body>
....

se non dovesse andare con quella libreria prova questa
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

non ricordo più qual'è quella corretta

**Basetz** · 11-04-2013, 15:42

Questo è ciò che ho provato a fare per vedere se la vosa funzionava... dimmi dove ho sbagliato

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
// barra delle pagine che segue lo scroll	
$(function() {
  $(window).scroll(function() {
	 if ($(window).scrollTop()>128){
		 muovi=$(window).scrollTop()-119;
	 }else{
		 muovi=10;
	}
		$('#prova').stop(true, true).
     	animate({
     		top: muovi    
    	}, 'slow', 'linear');
 });	

});
</script>
<body>
<div id="prova">
  

<font color="#FF0000" size="+7" face="Verdana, Arial, Helvetica, sans-serif">PROVA</font> 
  </p>
</div>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
</body>
</html>

Questa la pagina di prova http://www.benesserea360.it/prova.php

In teoria la scritta PROVA in grande in rosso dovrebbe starsene in alto . . .
Che paramentri devo correggere?

Prima che me lo chieda tu, ho provato anche inserendo

codice:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Grazie

**Grambo** · 11-04-2013, 17:40

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
// barra delle pagine che segue lo scroll	
$(function() {
  $(window).scroll(function() {
	 if ($(window).scrollTop()>0){//indichi quando far partire il menu, >0 significa che parte appena scendi di 1 px con la pagina, il menu comincia a seguirti
		 muovi=$(window).scrollTop(); //il div segure la pagina agganciandosi al top, se vuoi che sia più in basso o più in alto aggiungi o sottrai il valore
	 }else{
		 muovi=0; //posizione iniziale, quando con lo scroll torni ad inizio pagina
	}
		$('#prova').stop(true, true).
     	animate({
     		top: muovi    
    	}, 'slow', 'linear');
 });	

});
</script>
<body>

  <div id="prova" style="position: absolute; left: 42px; top: 0px; width: 101px; height: 55px; z-index: 1; color: #F00; font-family: Verdana, Geneva, sans-serif; font-size: 30px;">PROVA </div>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
</body>
</html>

quello era il codice per la mia pagina

tu devi personalizzartelo...
ho ristemato il codice che hai postato

EDIT:
per capire meglio guarda qua

codice:

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
// barra delle pagine che segue lo scroll	
$(function() {
  $(window).scroll(function() {
	 if ($(window).scrollTop()>50){//indichi quando far partire il menu, >0 significa che parte appena scendi di 1 px con la pagina, il menu comincia a seguirti
		 muovi=$(window).scrollTop(); //il div segure la pagina agganciandosi al top, se vuoi che sia più in basso o più in alto aggiungi o sottrai il valore
	 }else{
		 muovi=50; //posizione iniziale, quando con lo scroll torni ad inizio pagina
	}
		$('#prova').stop(true, true).
     	animate({
     		top: muovi    
    	}, 'slow', 'linear');
 });	

});
</script>
<body>

  <div id="prova" style="position: absolute; left: 42px; top: 50px; width: 101px; height: 55px; z-index: 1; color: #F00; font-family: Verdana, Geneva, sans-serif; font-size: 30px;">PROVA </div>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
  

prova</p>
</body>
</html>

ho agganciato "prova" a 50px

**Basetz** · 11-04-2013, 17:45

eccooo adesso sembra vero!!!

GRAZIE

**Grambo** · 11-04-2013, 17:49

Originariamente inviato da Basetz
eccooo adesso sembra vero!!!

GRAZIE

**Basetz** · 12-04-2013, 11:16

Originariamente inviato da Grambo

codice:

// barra delle pagine che segue lo scroll	
$(function() {
  $(window).scroll(function() {
	 if ($(window).scrollTop()>128){
		 muovi=$(window).scrollTop()-119;
	 }else{
		 muovi=10;
	}
		$('#tuo_div').stop(true, true).
     	animate({
     		top: muovi    
    	}, 'slow', 'linear');
 });	

});

il risultato puoi vederlo qua

tuo_div conterrà il nome del div principale del menù, quello che deve seguire lo scroll della pagina

EDIT: è oviamente jquery

EDIT2: io l'ho fatto che segue lentamente con un'animazione..ma per averlo come nel sito che hai indicato ti basta togliere l'animate

innanzi tutto grazie di tutte le dritte!!!
Il risultato è spettacolare

Ora vorrei togliere l'animazione . . . ho fatto diverse prove

, ma al momento che vado a togliere una parte del codice che mi hai dato, poi non mi funziona più nulla . . .

Come sarebbe il codice senza animazione?

Discussione: Menu che resta fisso raggiunta una certa altezza dello scorrimento della pagina

Strumenti discussione

Ricerca discussione

Visualizza

Menu che resta fisso raggiunta una certa altezza dello scorrimento della pagina

Permessi di invio