Hi, I'm trying to reproduce an accordion effect when scrolling up and down shown on Apples website here: http://store.apple.com/us/compare/mac?mco=MTg4Mjg5Nzk&page=imac (click "Compare" on any mac then start scrolling down)
This is what I have so far: http://jsfiddle.net/mackry/3KZky/15/
It's very complicated and a mess to look at. I'm obviously not taking this from the right approach and I'd like to ask if anyone else has a better way to go about composing this efficiently. It'd be greatly appreciated!
$(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;
});
});