私は近いと思いますが、これを完成させるのに苦労しています。基本的に、各画像まで下にスクロールすると、ウィンドウの上部からのその画像のオフセットを含むdiv(バッファーとして-500)は.selected
、左側のリスト要素にクラスを追加します。
http://jsfiddle.net/H6RTs/は私の例です
これが基本的に魔法が起こるコードです(一種):
$(window).bind('scroll', function() {
// What the current px is from vertical scroll
var scrollY = window.pageYOffset;
// They scrolled more than the original offset
if (scrollY > menuTop) {
if (menuClone.parent().length === 0) {
$('#js-current-products').each(function(index, value) {
var newIndex = index + 1;
var currentProduct = $('.js-current-product-' + newIndex).offset().top - 500;
if (scrollY > currentProduct) {
$('.js-product-' + newIndex).addClass('selected');
}
});
stickyDiv.addClass(posFixed).width(clonedWidth);
menuClone.after(stickyDiv.parent());
}
} else {
$('#js-product-menu li').first().removeClass('selected');
stickyDiv.removeClass(posFixed);
menuClone.remove();
}
});
$('.js-current-product-1')
クラスは最初のリスト項目に追加されますが、他の項目には追加されません(したがって、すべてを繰り返すのではなく、焦点を合わせ続けると思います(3になります)。
私は何が間違っているのですか?