1

Found this page recently and wanted to copy its navigation bar for my website.

As you notices, when the page loads the navigation bar uses a transparent background and is has padding. But when the user scrolls down, the bar slides up and sticks to the top. Pretty amazing!

http://whois.domaintools.com/

If I'm not wrong bootstrap was used for the navigation bar itself but I have no idea how they make it slide to the top when scolling down.

Any one has any idea how this can be accomplish?

Thanks JIACHEN:)

jia chen
  • 710
  • 1
  • 6
  • 16

1 Answers1

0

It is done using setting the position to Fixed and top to 0px. It keep on checking the offset of Navbar and once it reached to top it make it Fixed with top 0px. You can find a working example How to Bootstrap navbar static to fixed on scroll?. Where you can find working JSFiddle URL.

Hope this helps you understand how it is done.

Community
  • 1
  • 1
Nitin Garg
  • 888
  • 6
  • 7