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