Using _check_pos and offset for assigning active class to nav a href

[sumlah]

Quite possible that I've made too many modifications to my own stuff regarding the offset, but I was running into an issue where the last link in the navigation menu wouldn't take the class of "active."

The _check_pos function has the following code at line 213-217: $.each(S.sections.data, function(index) { if ((this.top_offset > boundry_top && this.top_offset < boundry_bottom) || (this.bottom_offset > boundry_top && this.bottom_offset < boundry_bottom) || (this.top_offset < boundry_top && this.bottom_offset > boundry_bottom) || (this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)) { sections_active.push(this); } });

However, if I set my scrollOffset to 0, it fails to match any of those above _check_pos conditions.

$('.maincontent').scrollNav({
scrollOffset: 0, animated: true, // animate the scroll speed: 500, // animate scroll at 500 speed insertTarget: this.selector, insertLocation: 'insertBefore', // inserts the scroll-nav arrowKeys: true, // allow use of arrow keys for scrolling through navigation onInit: null, onRender: null, onDestroy: null });

I added this line of code to the conditions and it resolved my issue: || (this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)

Final chunk of code looks like this: $.each(S.sections.data, function(index) { if ((this.top_offset > boundry_top && this.top_offset < boundry_bottom) || (this.bottom_offset > boundry_top && this.bottom_offset < boundry_bottom) || (this.top_offset < boundry_top && this.bottom_offset > boundry_bottom) || (this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)) { sections_active.push(this); } });

Are there multiple sections within the "view area"? It's a common issue that if multiple sections are within the view only the top-most one will become fully active. I've worked on multiple solutions but none have been better than what exists.

The problem comes down to how do calculate for user intent. If the user is just scrolling and there are three or four sections within the view, do you automatically highlight the last one, even if it's not the section they are currently reading?

I've played around with changing the behavior of the active class to only trigger when a section link is clicked, instead of what's in the view while scrolling, but I'm weary about changing the existing functionality. If you're already editing the source, you may want to try this, and if it works, feel free to send a Pull Request with a demo so I can check it out.

[sumlah]

Hey Jimmy!

It's more likely that I've done too much customization. I have the view area set to 100% to make sure each slide takes up the screen. I was logging the boundry_top/top offset and all the others to see if it was an issue of running out of page room to scroll, but it met all of the other criteria. So, I'm not sure :) All I know is that === condition I added fixed it for me.

I love scrollNav.js by the way :) Thanks so much for putting it out there. I'm using it for a final school project (for a history class). I'll show you the end result when it's done. I added some other fun stuff, so I might send a pull request your way. (I'm still at beginner git level). I forked it. Probably won't get to add much until the New Year.

Thanks for your reply and have an awesome holiday!

Sherry

On Tue, Dec 16, 2014 at 6:14 AM, Jimmy Wilson notifications@github.com wrote:

Are there multiple sections within the "view area"? It's a common issue that if multiple sections are within the view only the top-most one will become fully active. I've worked on multiple solutions but none have been better than what exists.

The problem comes down to how do calculate for user intent. If the user is just scrolling and there are three or four sections within the view, do you automatically highlight the last one, even if it's not the section they are currently reading?

I've played around with changing the behavior of the active class to only trigger when a section link is clicked, instead of what's in the view while scrolling, but I'm weary about changing the existing functionality. If you're already editing the source, you may want to try this, and if it works, feel free to send a Pull Request with a demo so I can check it out.

— Reply to this email directly or view it on GitHub https://github.com/jimmynotjim/scrollNav/issues/56#issuecomment-67150688 .

[jimmynotjim]

Ah ok, well if you do find that your changes are worth including, feel free to reopen this issue or open a pull request.