23-02-2012, 19:12
Witam wszystkich, potrzebuję Waszej pomocy - chciałem uzyskać dokładnie taki sam efekt jak na stronie: http://www.behance.net/gallery/Ilona/415746?utm_source=network&utm_medium=project_sidebar&utm_campaign=project_sidebar_references - chodzi o menu "Quick Profile" po prawej stronie. Skorzystałem z poradnika ze strony: http://jqueryfordesigners.com/fixed-floating-elements/ i "prawie wszystko" działa jak należy, tzn. warstwa przewija się w dół od pewnego momentu, ale po przewinięciu na sam dół strony nachodzi ona na stopkę. I teraz pytanie do was, co zrobić aby zatrzymywała się ona o określoną ilość np. px od dołu strony (tak jak na pierwszej wymienionej przeze mnie stronie - dochodzi do stopki i się zatrzymuje) ?
Mam nadzieję że wszystko w miarę jasno wytłumaczyłem
Proszę o pomoc.
Kod:
/* required to avoid jumping */
#commentWrapper {
position: absolute;
width: 200px;
}
#comment {
position: absolute;
/* just used to show how to include the margin in the effect */
margin-top: 10px;
margin-bottom: 200px;
text-align: center;
border-top: 1px solid #8a8b56;
border-bottom: 1px solid #8a8b56;
padding-top: 19px;
padding-bottom: 19px;
width: 200px;
background:url(../xxx.gif) repeat-y 0 0 #B3B477;
}
#comment.fixed {
position: fixed;
top: 0;
}Kod:
....
<head>
...
<script src="jquery.js"></script>
<script>
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#comment').addClass('fixed');
} else {
// otherwise remove it
$('#comment').removeClass('fixed');
}
});
}
});
</script>
</head>
...
<div id="commentWrapper">
<div id="comment">
<zawartość warstwy>
</div>
</div>
...Mam nadzieję że wszystko w miarę jasno wytłumaczyłem
Proszę o pomoc.
