How to keep the container followed by navbar in a fixed position on page scroll

I have a container which contains my company name, logo and carousel for a slide show on the top of the page and below this container, I have a navbar. Now I want this container and navbar both to be fixed on a page scroll or at least during page scroll container should get hide and navbar alone should be fixed. Can someone help me with this? Below is the sample image of my design. Navbar and container

For some reason image is invisible. hence click here to view the image :

I use this site a lot. But here is a good page for info on using AFFIX which is already part of bootstrap, you just need to code your page right for it to work.