Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Active class not being applied to link #37

Closed
Reached opened this issue Apr 15, 2016 · 8 comments
Closed

Active class not being applied to link #37

Reached opened this issue Apr 15, 2016 · 8 comments

Comments

@Reached
Copy link

Reached commented Apr 15, 2016

Hi cferdinandi,

Really great work on this plugin (and smooth-scroll), it's really easy to use! However I have ran into an issue. I have four links in my navigation bar like this:

<div class="links-right" data-gumshoe>
                    <a data-scroll href="#intro">Intro</a>
                    <a data-scroll href="#about">About</a>
                    <a data-scroll href="#services">Services</a>
                    <a data-scroll href="#contact">Contact</a>
                </div>

It applies the classes correctly when I scroll, however it's skipping the #services link for some reason.

The markup for each section is like the following:

<section class="services-section" id="services">
            ...
</section>

To better explain whats happening, i made a short video showing it. Do you have any idea what's causing this? :)
link being skipped.zip

@cferdinandi
Copy link
Owner

Hi there - can you toss the video up on YouTube or Vimeo? For security reasons, I don't download files from people I don't know. Thanks!

@cferdinandi
Copy link
Owner

Or better yet, a reduced test case where I can actually look at the code in a working environment would be great.

@Reached
Copy link
Author

Reached commented Apr 15, 2016

That is completely understandable :).

Here is a link: https://www.youtube.com/watch?v=1AIVa3ZGZOg&feature=youtu.be, quality is bad, but should be able to see what happens.

If this is not enough, I can provide some more code :)

@cferdinandi
Copy link
Owner

This video is private. Sorry about that.

=(

@Reached
Copy link
Author

Reached commented Apr 15, 2016

God im a nub, try now :)

@cferdinandi
Copy link
Owner

Just from looking at it, it could be that the script thinks your at the bottom of the page (and therefore activates the last link). BUT... could be something else. If you were able to setup a working (or failing, in this case) example I could look at, that'd help me debug.

@Reached
Copy link
Author

Reached commented Apr 15, 2016

Hi again,

I just tried to set the height of each of my sections to a 1000px, that solved the problem.. So I guess you were right about the script thinking I was at the bottom :).

Thank you!

@cferdinandi
Copy link
Owner

Cool. The reason I do that is because I was running into edge cases where the last section was fully on screen, but the section before it was too and so the last section never went active. I noticed a few other ScrollSpy scripts used the same approach (most notably, Bootstrap's) and went with that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants