fixed image within a container
What is the best way to make a div scroll along with the page?
The exact effect is utilized @ http://store.apple.com/ (on the checkout summary after a product is ad开发者_如何转开发ded to the cart)
edit: or this example - alas, it's not as smooth as i'd like it to be =/
In the second example, they are using jQuery to do this. Scroll event of window object is caught and the using the animate() function the position of div is changed dynamically.
This tutorial should help you: http://css-tricks.com/scrollfollow-sidebar/
jQuery saves the day... again!
CSS:
#wrapper {
position: absolute;
width: 200px;
}
#fancyDiv {
position: absolute;
top: 0;
}
#fancyDivt.fixed {
position: fixed;
top: 0;
}
html:
<div id="commentWrapper">
<div id="comment">
<p>some text</p>
</div>
</div>
jQuery:
$(document).ready(function() {
$(function () {
var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').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 div
if (y >= top) {
// if so, ad the fixed class
$('#fancyDiv').addClass('fixed');
} else {
// otherwise remove it
$('#fancyDiv').removeClass('fixed');
}
});
}
});
精彩评论