title: Changing box-shadow of css using javascript on scroll
body: <p>my css of my bootstrap nav is as follows</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>and in my js file i am calling this function using jquery</p>
  
  <pre><code>$(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);
  });
  </code></pre>
  
  <p>what i want is to change my box-shadow after scrolling about 500px but it is not happening 
  help me with this please?</p>