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>