gpt4 book ai didi

jQuery:滚动 Accordion 效果

转载 作者:行者123 更新时间:2023-12-01 04:29:12 25 4
gpt4 key购买 nike

我试图在苹果网站上显示的上下滚动时重现 Accordion 效果:http://store.apple.com/us/compare/mac?mco=MTg4Mjg5Nzk&page=imac (在任何 Mac 上单击“比较”,然后开始向下滚动)

这是我到目前为止所拥有的:http://jsfiddle.net/mackry/3KZky/15/

它看起来非常复杂而且一团糟。显然我没有采取正确的方法,我想问是否其他人有更好的方法来有效地编写它。我们将不胜感激!

$(document).ready(function() {
var schedule = $('#schedule'),
schedulePos = $('#schedule').offset(),
page = $('#page'),
index = 0,
prevScroll = $(document).scrollTop(),
margin = schedulePos.top;


$(window).scroll(function()
{
var newScroll = $(document).scrollTop(),
prof = $('li#professor').eq(index);

//schedule.html($(document).scrollTop() + ' ' + $(window).scrollTop() + '<br/>Prof #1: ' + prof.offset().top + '<br/>index: ' + index);

if ($(this).scrollTop() >= schedulePos.top && !schedule.hasClass('fix') && newScroll > prevScroll) {
schedule.addClass('fix');

}
else if ($(this).scrollTop() < schedulePos.top) {
schedule.removeClass('fix');

}

if ($(window).scrollTop() >= ((100 * (index+1)) + margin) && newScroll > prevScroll) {
//alert(index);
prof.css({
position: 'fixed',
height: '50px',
top: (schedule.height() + (index * 50)) + 'px'
});
index++;
}
else if ($(window).scrollTop() <= ((100 * (index+1)) + margin) && newScroll < prevScroll) {
prof.css({
position: 'static',
height: '150px'
});
index--;
}

prevScroll = newScroll;
});
});​

最佳答案

我一直忙于其他项目,但我终于开始制作一个可以实现这种效果的 jQuery 插件。 Get it from hereCheck out a demo .

关于jQuery:滚动 Accordion 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3954922/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com