jQuery's FadeTo() not working on Navbar

Question

I am trying to fade in a bootstrap's navbar when scroll top is below 100 and fade it out when is above 100. My code is not working as expected, it is fading just when the page wants. Where is the error?

jQuery's code:

$(document).scroll(function() {

      if($(this).scrollTop() < (100)){
        $(".navbar-default").fadeTo("slow", 1);
      }
      else{
        $(".navbar-default").fadeTo("slow", 0.5);
      }                 

    }); 

Answer 1

There are two moments in your code:
1) You should use $(window).scrollTop() for top scroll value
2) use .stop(true, true) to prevent any glitch for animation

$(document).scroll(function() {
    if($(window).scrollTop() < 100){
       $(".navbar-default").stop(true, true).fadeTo("slow", 1);
    }
    else{
       $(".navbar-default").stop(true, true).fadeTo("slow", 0.5);
    }                 

    });