CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3829658
user3829658

Reputation: 159

jquery fixed header after 200 scroll

I had a code here jsfiddle. I can't make it scroll fixed after 200 scroll.

$(window).load(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $('navbar').css('position', 'fixed');
            $('navbar').slideDown();
        } else if ($(this).scrollTop() <= 200) {
            $('navbar').removeClass('position', 'relative');
            $('navbar').slideUp();
        }
    });
});

Upvotes: 2

Views: 3103

Answers (2)

imbondbaby
imbondbaby

Reputation: 6411

You need to add . in navbar since it is a class and change the first line to $(function () {

No need to execute a load function in your code when you are using onload event already.

Also, as mentioned in the comments:

Change:

$('.navbar').removeClass('position', 'relative');

To:

$('.navbar').css('position', 'relative');

Try this:

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $('.navbar').css('position', 'fixed');
            $('.navbar').slideDown();
        } else if ($(this).scrollTop() <= 200) {
            $('.navbar').css('position', 'relative');
            $('.navbar').slideUp();
        }
    });
});

JSFiddle Demo

Upvotes: 2

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

Not .removeClass this one is .css

Try

$('.navbar').css('position', 'relative');

instead of

$('.navbar').removeClass('position', 'relative');

Upvotes: 0

Related Questions