CODEWITHSUNDEEP
javascriptjquerycss
Dennys Caldeira
Dennys Caldeira

Reputation: 11

Keeping my nav when you scroll down the page

I'm trying to design a website for my company, but I can't figure one thing.

I want navbar fixed while people scroll down the page

like this one http://www.quintessentially.com (as you can see, the navigation bar gets fixed when you scroll down the page )

I'm using jQuery 1.8.3.min.js and this code

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav').addClass('absolute');
     }
     else {
         $('.nav').removeClass('fixed');
     }
});

and the css is like this 

header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}

.fixed{
position: fixed;
top: 0;  }

But I don't why it isn't working. Does someone know how to fix it?

Thanks !! :D

ps: sorry about my bad english.

Upvotes: 1

Views: 40

Answers (1)

elzi
elzi

Reputation: 5672

You need to reverse the logic. 

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.nav').
          .removeClass('absolute')
          .addClass('fixed');
     }
     else {
         $('.nav')
          .removeClass('fixed')
          .addclass('absolute');
     }
});

Added a removeClass as well to prevent any class priority issues.

Upvotes: 1

Related Questions