ScrollSpy and Navbar

Get Navbar to stick to the top.

A Nice feature could be to get the top of the page to fade out as user scrolls past it. And similarly for the bottom of the page.

Has taken some time to get the Navbar working. The navbar updates as you scroll past. Had to disable the default scrolling when you click a link as it was updating the URL also, which wasn’t happening during the scrollspy changes, so i disabled that completely.

Had to offset the new scrolling behaviour by about 50px also. Because the Navbar is stuck to the top, when it scrolls to the position, it covers some of that area, so we need to offset the scroll by the height of the navbar, so the new position comes into view properly.

Got a smoothScroll polyfill which allows the smooth scrolling feature to work on all browsers. Smooth scrolling looks much better now. This jQuery solution also works for scrolling to an element.

Finally got the scrolling working as I want, with the offsets and all.

Am building a moving underline for the navigation using this as an example.

The nav menu is messed up on collapse. Also the underline does not move as you scroll down the page. Maybe should just remove this underline thing completely.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s