How to make a Floating Nav bar? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I got this site at http://www.f7tek.tk. The site has a white menu bar.

What i want is, when i scroll down the page this bar sticks on the top:

I tried setting the position to fixed and setting the z-index to 1000. That does almost everything I want but When I scroll down the bar stays at that position, doesn't move to the top like i wanted.

Is it possible using CSS only? what about JavaScript? If it is, then how?

Answer 1

What you want to do is to add a class to your header bar if you scroll to a certain point.

So if you have a header called <div class="sticky-header">Your header</div> and add a second class called fixed that will be applied after scrolling to 100px from the top of the window it will stick from there.

JQUERY:

$(window).scroll(function(){
    if ($(window).scrollTop() >= 100) {
       $('.sticky-header').addClass('fixed');
    }
    else {
       $('.sticky-header').removeClass('fixed');
    }
});

CSS:

.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; 
}

JSFIDDLE DEMO