Jquery, menu item highlighted too early on scroll -
i have page 2 divs. first 1 contains list of items, second 1 contains 1 section each item of list. when scrolling down second div, i'd correct li highlighted when corresponding section "active". problem hightlighted before reaching correct section. here's codepen made. , here's jquery function use:
$('#event-details .content').on('scroll', function() { $('.event-title').each(function() { if($('#event-details .content').scrolltop() >= $(this).offset().top) { var id = $(this).attr('id'); console.log(id); $('.event-title').removeclass('active'); $('#' + id).addclass('active'); } }); });
i guess problem on conditions can't solve it. idea that? thank you!
by comments the first li highlighted.
that's because return 1 scrolltop
greater first section offset. check section ends. top offset plus height of section.
$('#event-details .content').on('scroll', function() { $('.event-title').each(function() { var id = $(this).attr('id'); if($('#event-details .content').scrolltop() >= $('.event-' + id + '-details').offset().top && /* here needed in condition */ $('#event-details .content').scrolltop() <= $('.event-' + id + '-details').offset().top + $('.event-' + id + '-details').height()) { console.log(id); $('.event-title').removeclass('active'); $('#' + id).addclass('active'); } }); });
note: tweak little change taste(e.g half of height or amount of pixel)