jquery addClass / removeClass not working with header

Question

I have a fixed header as a navigation bar. So when I scroll "in index page only" more or = to 200px , the header changes from background: none; to background: #FFF; and I wanted to add a shadow class with jquery when the scroll>=200px . But the changes did not apply after the scroll, however when I inspect the element, I find the class has been already added to the header. On the other side, the same class apply when I add it for another element and scroll.

Any idea guys! Seems like my codes are great, but there is something missing.

Here are my codes:

HTML:

<header>
    <a href="<?php echo hostName() ?>"><img src="<?php echo hostName() ?>/images/icon/dark-logo.png" class="main-logo"/></a>
    <nav>
        <ul class="clearfix">
            <li><a href="#" class="search"><span></span></a></li>
            <?php
                if(isset($_SESSION['id']) && $_SESSION['type']=="admin")
                {
                    ?>
                    <li><a href="<?php echo hostName() ?>/php/functions/logout.php">logout</a></li>
                    <li><a href="<?php echo hostName() ?>/admin/dashboard" class="dashboard" target="_blank">dashboard</a></li>
                    <?php
                    }
            ?>
            <li><a href="<?php echo hostName() ?>/about">about</a></li>
            <li><a href="<?php echo hostName() ?>/explore">explore</a></li>
            <li><a href="<?php echo hostName() ?>/courses">courses</a></li>
        </ul>
    </nav>
</header>

Js:

var lastScrollTop = 0;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   if (st >=200)
   {
       // down
       $('.container > header').addClass("shadow").css({"background-color":"#FFF"});
       $("header > a").fadeIn(200);
       }
       else
       {
            //up
            $('.container > header').css({"background":"none"});
            $("header > a").fadeOut(200);
            }
   lastScrollTop = st;
});

Answer 1

First, don't use CSS in your JS, unless you are looking for errors :-) Prefer toggle a class like that :

Keep your HTML. CSS :

header{
  width: 100%;
  background:none;
  position: fixed;
}
header.shadow{
  background:none;
  background-color: white;
  box-shadow: 0px 1px 10px -3px black;
}

Is this JS :

$( document ).ready(function() {
  var lastScrollTop = 0;
  $(window).scroll(function(){
     var st = $(this).scrollTop();
     if (st >=200){
         // down
         $('.container > header').addClass("shadow");
         $("header > a").fadeIn(200);
         }else{
              //up
              $('.container > header').removeClass("shadow");
              $("header > a").fadeOut(200);
         }
     lastScrollTop = st;
  });
});

I don't know what you want to do with your link with fadeIn/fadeOut, sorry

Démo : https://jsfiddle.net/ox8L0tfd/