in questo caso il menu si fissa quando raggiunge la posizione top della pagina
come si può fare per impostare questi valori in pixel ad esempio quando il box si trova a 400px dal top deve fissarsi
posto del codice con un esempio in JavaScript per farmi capire meglio grazie.
Esempio:
codice HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(window).scroll(function(){
$('#daFissare').css({ 'position':'relative'});
if( !isScrolledIntoView($('#daFissare')) ){
$('#daFissare').css({ 'position':'fixed', 'top':'0'});
}
});
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
</script>
<style>
#header{
margin:0 auto;
padding: 0;
height: 90px;
background-color: #FF0000;
text-align: center;
}
.menu{
width:360px;
height:40px;
margin:0 auto;
padding:0;
}
ul{
margin:0 auto;
padding:0;
}
li{
text-align:center;
width:90px;
height:40px;
background:red;
float:left;
}
#contenuto{
margin-top:200px;
border: 1px solid red;
width:100%;
height: 3000px;
}
</style>
</head>
<body>
<div id="header"><h1>Header</h1></div>
<div class="menu" id="daFissare">
<ul>
<li><a href="#">home</a>
</li>
<li><a href="#">pag</a>
</li>
<li><a href="#">pag</a>
</li>
<li><a href="#">pag</a>
</li>
</ul>
</div>
<div id="contenuto">
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
<p>qui i contenuti della pagina</p>
</div>
</body>
</html>
Rispondi quotando