Changing box-shadow of css using javascript on scroll

Question

my css of my bootstrap nav is as follows

.navbar-default
 {
    background-color: #fff;
    box-shadow: 5px -149px 90px 200px rgba(255,255,255,1);
    border-color: #fff;
    height:0px;
    padding: 0px;
    border: 0px;
}

and in my js file i am calling this function using jquery

$(window).scroll(function(){
    var wScroll = $(this).scrollTop();

    if (wScroll==500)
    { 
        $('.navbar-default').attr("box-shadow","5px -49px 190px 220px rgba(255,255,255,1)");
    }
    console.log(wScroll);
});

what i want is to change my box-shadow after scrolling about 500px but it is not happening help me with this please?

Answer 1

Change if (wScroll==500) to if (wScroll>=500)

and $('.navbar-default').attr to $('.navbar-default').css.

$(window).scroll(function(){
        var wScroll = $(this).scrollTop();

        if (wScroll>=500)
        { 
            $('.navbar-default').css("box-shadow","5px -49px 190px 220px rgba(255,255,255,1)");
        }
    });

Edit: For ease effect use trasition:

.navbar-default {
  transition: ease .5s;
 -webkit-transition: ease .5s;
}