CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapscroll
Konstantin Rusanov
Konstantin Rusanov

Reputation: 6554

Bootstrap and scrollTo.js navigation

I am a novice front-ender, and I have an incomprehensible problem. On my page, when you click on the links from the top menu, it scrolls down to the desired block. However, the link is not marked active unless the user scrolls the page a few pixels down. Why is this happening and how can I fix it? Here's the html:

            <nav class="menu">
                <div class="nav-collapse">
                    <ul class="nav">
                     <li><a data-action="scrollTo" href="#content" class="hover">Download</a></li>
                     <li><a data-action="scrollTo" href="#productfeatures">Product Features</a></li>
                     <li><a data-action="scrollTo" href="#howitlooklike">How it look like</a></li>
                     <li><a data-action="scrollTo" href="#mobile">Mobile Version</a></li>
                     <li><a data-action="scrollTo" href="#footer">Contacts</a></li>     
                    </ul>
                </div>
            </nav><!-- Nav End-->

If you refresh the page and scroll up - an active link would appear.

all code you can see here

Upvotes: 0

Views: 7008

Answers (1)

Puneet Kalra
Puneet Kalra

Reputation: 24

If you are using Bootstrap then why not use 'ScrollSpy' JS component of it?

Its easy to use and allows to set offset from top of window, which is the root problem with your site right now. Its activating based on position from top while you are having fixed navigation.

You can use 'ScrollSpy' and set offset little higher than your NAV elements height. Also, theres 'activate' event which fires everytime new nav link is activated. So that should do the trick for you.

Here's the link: http://getbootstrap.com/javascript/#scrollspy

Upvotes: 1

Related Questions