Highlight Anchor Links when user manually scrolls

Question

I apologize for the long post  I wanted to include everything that might be helpful   I have a single page website that consists of several divs stacked vertically  I m using a floating nav bar and softscroll js to make anchor links move to the divs when clicked   I m a front end designer  but through this website and hours of trial error and googling I ve been able to get all elements working   Auto resize div height when window resize  highlight clicked anchor link  scroll etc    I ve got it set up so that clicking an anchor link changes it s class to  active   That works beautifully  But I want to trigger the same thing if the user manually scrolls to the div as well   I ve looked at the code used in this post as I ve seen it a couple of times  But it replaces some of the codes I ve already got working and still doesn t highlight   Here is the code I m using for the active anchor      JS for highlight selected button   function            a   click function              remove classes from all          a   removeClass  active             add class to the one we clicked         this  addClass  active                 And I m using this one to resize the divs based on window size  Not sure if it is relevant  but here      JS for Div Height Auto Resize    document  ready function      resizeDiv         window onresize   function event      resizeDiv       function resizeDiv       vpw     window  width      vph     window  height          layoutblock   css   height   vph    px         This is the menu HTML    lt div id  navigation  gt   lt ul gt   lt li gt  lt a href   composition   gt  lt img src  images icons compicon png  alt  composition  width  32  height  36  border  0  align  middle    gt Composition lt  a gt  lt  li gt   lt li gt  lt a href   creative  gt  lt img src  images icons designicon png  alt  Large Format  width  36  height  33  border  0  align  middle    gt  Creative lt  a gt  lt  li gt         lt  ul gt   lt  div gt       and the menu CSS      navigation       background-color   F60      position  fixed      height  100       width  60px       -moz-transition width  5s      -webkit-transition width  5s      -o-transition width  5s      transition width  5s      overflow  hidden      left  0px      top  0px      z-index  99      padding-top  30px      margin-left  0px      navigation hover       margin-left  0px      width  190px      navigation li       list-style  none      margin-left  -40px       navigation img       padding-left  5px      padding-right  20px     navigation li a       font-family   Proxima N W01 Smbd   Arial  Helvetica      font-size  14px      display  block      color  white      font-weight bold      text-decoration  none      text-transform uppercase      line-height 26px      padding-left 5px      padding-right  5px      padding-top  10px      height  50px      white-space  nowrap     a active      background-color   333      Finally  here is the URL for the test page   redacted for security now that site is launched

User · Answer

You can use Jquery s on method and listen for the scroll event

[javascript] Highlight Anchor Links when user manually scrolls?

Examples related to javascript

Examples related to jquery