Tyler Williams
Tyler Williams

Reputation: 11

Single Page Web Design w/ Dynamic Navbar

Quite frankly I don't even know how to describe what I'm attempting to do. "Dynamic Navbar" is the best I have come up with.

Basically, I've created a single page website with 4 "pages" (sections) using purely HTML and CSS (as well as jQuery for smoothScroll).

I want the highlighted link on the navbar (the current page) to change when users scroll between pages. I've seen this done before, such as on this site:

http://thinkpixellab.com/

I have little-to-no experience with JavaScript and jQuery and I'm really not sure where to start. If anyone could point me in the right direction I would greatly appreicate it!

Upvotes: 1

Views: 685

Answers (1)

SharkofMirkwood
SharkofMirkwood

Reputation: 12631

What you're looking for is ScrollSpy. It's made for Mootools originally, I think: Scrollspy

Bootstrap have it as a plugin for their framework: Bootstrap Scrollspy

I found a standalone JQuery plugin for it, though not sure how good it is as I haven't used it myself: plugin

Obviously you could write something yourself, but with not much experience of JS/Jquery I reckon you're better off sticking to a plugin or something.

Upvotes: 3

Related Questions