So if you go to this website you'll see that the vertical navigation follows you as you scroll(you get the best experience on the tax collection page). How would you make it so that as you scroll down away from the header image the menu would go to the top of the screen, and/or how would you make it so it cannot pass over the footer? Because on smaller resolution screens it overlaps on top of the footer.
Header & Menu - they're just fine. I see this:
I understand your concern of it overlapping the footer on a small screen. You should remember that your menu's height is quite extensive - so you definitely are looking at a minimum screen resolution to fit your menu's height.
Other than that, the technique you want to implement is called 'Follow Sidebar'. Check out this link: http://css-tricks.com/scrollfollow-sidebar/
You could grab the code from there and implement it. It is a simple jQuery function.
I ment when you scroll down there's big ugly spacing in between the nav and top of page. Anyway thank you for the code, but I still don;t understand how to make it shift to the top when the header is out of site, or how to prevent it from moving a certain distance down