Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:07
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
How to setup a fixed navbar using javascript when you have an extra header on top of it. Or, a fading navbar.
# The basic idea here is that you set a num of pixels before triggering the css "fixed"
# which would freeze whatever you div attribute you set, in this case"nav".
# This is a simple way to do it but there's a library you can use to do the same thing.
num = 250 #number of pixels before modifying styles
$(window).bind "scroll", ->
if $(window).scrollTop() > num
$("nav").addClass "fixed"
$("nav").removeClass "fixed"
# Here's another way to write the code
$(window).on "scroll", ->
if $(window).scrollTop() >= 462 and not $("nav").hasClass("naxed-top")
$("nav").addClass "fixed"
else $("nav").removeClass "navbar-fixed-top" if $(window).scrollTop() < 462 and $("nav").hasClass("navbar-fixed-top")
# This is a way to first hide the navbar and then make it appear once it passes .navbar height
starting_position = $('.navbar').outerHeight(true)
$(window).scroll ->
yPos = ($(window).scrollTop())
if yPos > starting_position
.fixed {
width: 100%;
position: fixed;
top: 0;
z-index: 1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment