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)


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -