我正在寻找重新创建 Apple Store 购物车边栏的方法。
http://store.apple.com/us/configure/MB535LL/A?mco=MTA4MTg3NTQ
它与“position: fixed”类似,不同之处在于它以“position: absolute”开始,带有 CSS 类“pinned_top”,然后在到达某个 scroll-y 位置时切换到 CSS 类“floating”。
我到处都找过这个,教程似乎应该很明显,但我还没有找到任何东西。有帮助吗?
最佳答案
您将不得不处理 window.onscroll事件,并检查元素位置,如果 scrollTop大于元素的位置,则将元素固定在顶部,如果不是,则将元素放置在原来的位置。
安example使用 jQuery:
$(function () {
var $el = $('.fixedElement'),
originalTop = $el.offset().top; // store original top position
$(window).scroll(function(e){
if ($(this).scrollTop() > originalTop ){
$el.css({'position': 'fixed', 'top': '0px'});
} else {
$el.css({'position': 'absolute', 'top': originalTop});
}
});
});
关于javascript - 使用 Javascript 在 Scroll Position 的基础上交换 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1548765/