Recreating the Apple Store's summary that moves with the page scrolling
I'm looking to create something like what Apple has on their online store for displaying the summary of your computer and total as seen here. I'm guessing thi开发者_如何学Pythons is JavaScript, but it'd be even cooler if it could be done in CSS.
Basically I'd like something scrolls with the page like position:fixed
, but I don't want it to start moving until the user has scroll past a certain position.
I'm using jQuery, so a jQuery plugin would be perfect as well.
Try something like this
var min = 10; //Set your own here
$(window).scroll(function() {
var scrollTop = $(window).scrollTop()
if(scrollTop > min)
$('.divClass').css({ top: "0" });
else
$('.divClass').css({ top: (min - scrollTop) + "px" });
});
CSS
.divClass
{
position:fixed,
left: 500px /* or whatever */
}
精彩评论