Jquery/Javascript: div con position fixed o absolute a seconda dei casi

**WebMinus** · 11-02-2013, 19:01

Ciao a tutti.
Premetto che non ho molta dimistichezza con javascript e jquery, e che mi sto avvicinando a loro solamente ora. Cmq: sto cercando di ottenere un menù di navigazione simile a quello di questo sito:

http://diehlgroup.com/

Praticamente, in un sito che si sviluppa verticalmente e con overflow: hidden un menù che nella prima pagina in alto sia posizionato in modo assoluto in basso nella finestra, ma che se lo scroll supera la fine della prima pagina (la home page) diventi un posizionamento fixed in alto nella finestra.

Ho provato utilizzando i metodi di jquery offset() e position(), ma non sono stati sufficienti. I miei sforzi mi hanno portato più o meno qui:

codice:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css" >
		.abs
		{
			position: absolute !important;
			top: 200px;
		}
		
		.fixx
		{
			position: fixed;
			top: 0;
		}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript">
		
		$(document).ready(function(){
			$(window).scroll(function(){
				if ($('#content2').offset().top > 0)
				{
					if ($('#menu').hasClass('abs'))
					{
						$('#menu').removeClass('abs');
						$('#menu').addClass('fixx');
					}
					else if (!($('#menu').hasClass('fixx')))
					{
						$('#menu').addClass('fixx');
					}
				}
				else
				{
					if ($('#menu').hasClass('fixx'))
					{
						$('#menu').removeClass('fixx');
						$('#menu').addClass('abs');
					}
				}
				
			});
			
			$('#btn_verifica').click(function(){
				alert('offset del menu: ' + $('#menu').offset().top + '; \n position del menu: ' + $('#menu').position().top + '; \n offset del div: ' + $('#content2').offset().top + '; \n position del div: ' + $('#content2').position().top + '.');
				alert('proviamo così: ');
			});
		});
		
	</script>
</head>
<body>
	<div id="main" style="height: 3000px;" >
		<div id="content1" style=" position: relative; border: 2px solid red; width: 100%; height: 1400px;">
		</div>
		<div id="content2" style="border: 2px solid black; width: 100%; height: 1400px;">
			<div id="menu" class="abs" style="position: fixed; width: 100%; height: 40px; background-color: aqua;">
			</div>
		</div>	
		<div id="content3" style=" position: relative; border: 2px solid aqua; width: 100%; height: 1400px;">
		</div>
		<div id="content4" style=" position: relative; border: 2px solid orange; width: 100%; height: 1400px;">
		</div>
		<div id="verifica" style="border: 4px solid blue; width: 40px; height: 40px; position: fixed; rigth: 0px; top: 300px;">
			<input type="button" id="btn_verifica" value="click" />
		</div>
	</div>

</body>
</html>

ma mi servirebbe un metodo che mi rivelasse la posizione di un oggetto rispetto all'oggetto window (penso).

Non so, qualcuno ha idee?

Grazie mille a tutti

**Xinod** · 11-02-2013, 23:17

quello che ti serve e' solo sapere quanti pixel sono scrollati e quanto e' alta la viewport
per lasciare piu' o meno tutto come hai fatto tu:

codice:

		$(document).ready(function(){
			function setMenuPosition(){
				var fromTop=$(window).scrollTop()
				var viewPortH=$(window).height()
				if(fromTop>viewPortH) $('#menu').css('top','auto').removeClass('abs').addClass('fixx');
				else $('#menu').removeClass('fixx').addClass('abs').css('top',viewPortH-40);
			}
			$(window).bind('scroll resize load', setMenuPosition);
			
		});

ciao

**WebMinus** · 15-02-2013, 15:00

Ciao, intanto scusa per il ritardo nella risposta, tu sei stato velocissimo e io sono riuscito solo ora a fare qualche prova.

Ho provato a implementare il tuo codice, ma non riesco a farlo funzionare. Sicuramente è qualche cavolata che mi è sfuggita, ma sono proprio all'inizio con juery, porta pazienza.

Di seguito il codice:

codice:

<!DOCTYPE html>
<html>
<head>
	<style type="text/css" >
		.abs
		{
			position: absolute !important;
			bottom: 100px;
		}
		
		.fixx
		{
			position: fixed;
			top: 0;
		}
	</style>
	<script type="text/javascript" src="js/jquery.js"></script>
	
	<script type="text/javascript">
	
		$(document).ready(function(){
		
			function setMenuPosition(){
				var fromTop=$(window).scrollTop();
				var viewPortH=$(window).height();
				if(fromTop>viewPortH) {
					$('#menu').css('top','auto').removeClass('abs').addClass('fixx');
					}
				else $('#menu').removeClass('fixx').addClass('abs').css('top',viewPortH-40);
			}
			
			$(window).bind('scroll resize load', setMenuPosition);
			
		});
		
	</script>
</head>
<body>
	<div id="main" style="height: 3000px;" >
		<div id="content1" style=" position: relative; border: 2px solid red; width: 100%; height: 1400px;">
		</div>
		<div id="content2" style="border: 2px solid black; width: 100%; height: 1400px;">
			<div id="menu" class="" style="width: 100%; height: 40px; background-color: aqua;">
			</div>
		</div>	
		<div id="content3" style=" position: relative; border: 2px solid aqua; width: 100%; height: 1400px;">
		</div>
		<div id="content4" style=" position: relative; border: 2px solid orange; width: 100%; height: 1400px;">
		</div>
		<div id="verifica" style="border: 4px solid blue; width: 40px; height: 40px; position: fixed; rigth: 0px; top: 300px;">
			<input type="button" id="btn_verifica" value="click" />
		</div>
	</div>

</body>
</html>

Discussione: Jquery/Javascript: div con position fixed o absolute a seconda dei casi

Strumenti discussione

Ricerca discussione

Visualizza

Jquery/Javascript: div con position fixed o absolute a seconda dei casi

Permessi di invio