ciao a tutti, sto scrivendo uno script in jquery che quando scrollo una pagina in basso l'altezza del contenuto si rimpicciolisce... ora lo script funziona, ma quando arrivo a fine pagina mi fa una cosa alquanto strana, lo scroll va in fondo (perchè ovviamente scrollo in basso), e arrivato alla fine torna a meta... solo se scrollo a velocità improponibili allora si ferma.... mi sapete dire come mai???
vi posto i codici html, css e js:
<html>
<head>
<title>Test lembemberg</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script src="scripts/jquery.scrollTo-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body id="page">
<div id="box">
<div id="sez-1" class="scrollable">
</div>
<div id="sez-2" class="scrollable">
</div>
<div id="sez-3" class="scrollable">
</div>
<div id="sez-4" class="scrollable">
</div>
</div>
<div id="clr"></div>
<div id="footer"></div>
</body>
</html> body{
overflow: hidden;
}
#box {
overflow: scroll;
}
.scrollable{
width:100%;
overflow:hidden;
}
#sez-1 {
background-image: url(../img/1.jpg);
}
#sez-2 {
background-image: url(../img/2.png);
}
#sez-3 {
background-image: url(../img/1.jpg);
}
#sez-4 {
background-image: url(../img/2.png);
}
#footer {
width: 100%;
height:20px;
}$(document).ready(function(){
var heightW = $(window).height();
$('.scrollable').height(heightW);
$('#box').height(heightW);
$('#box').scroll(function () {
var scrollY = $('#box').scrollTop();
var scrollHeight = heightW - scrollY;
$('#sez-1').css({'height' : scrollHeight, 'max-height' : heightW});
$('#sez-2').css({'height' : scrollHeight*2, 'max-height' : heightW});
$('#sez-3').css({'height' : scrollHeight*4, 'max-height' : heightW});
});
});
risolto facendo cosi nel js:
$(document).ready(function(){var heightW = $(window).height();
$('.scrollable').height(heightW);
$('#box').height(heightW);
$('#box').scroll(function () {
var scrollY = $('#box').scrollTop();
var scrollHeight = heightW - scrollY;
$('#sez-1').stop().animate({'height' : scrollHeight}).css({'max-height' : heightW});
$('#sez-2').stop().animate({'height' : scrollHeight*2}).css({'max-height' : heightW});
$('#sez-3').stop().animate({'height' : scrollHeight*4}).css({'max-height' : heightW});
});
});
.animate al posto di .css