jquery change size of text box when module visible

Hey Folks,

I'm working on single page portfolio site. I want to have a sidebar navigation menu, where the 'button' (I'm actually using text modules) will expand when that section becomes visible (either by scrolling, or clicking the 'button' which uses an anchor link).

I'm currently using a code module in the same column as the 'buttons'. I was able to achieve the desired effect with the following:

Code:

Log In or Sign Up to view this code.

However, this relies on specific px distances. I want the change in height to be triggered by modules being 25% visible, so I tried to use waypoint, but it's not working:

Code:

Log In or Sign Up to view this code.

Any help you can provide would be much appreciated!

-LC

 

Thanks so much for your help! It's much appreciated. I have still have a lot to learn. I like what you've suggested here and it makes sense to me, but unfortunately it does not seem to work. Any thoughts?