Fixed top navigation bar

by vinoli

HTML

<body>

<div id="notificationBar" class="alert alert-success alert-server" role="alert" style="display: none; overflow: hidden; z-index: 9999; margin-top: -40px;">
  <button type="button" class="close" data-dismiss="alert">×</button>
</div>      

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-content">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo" href="#">
                <img src="http://placehold.it/100x46/E8117F&text=Logo">
            </a>
        </div><!-- /.navbar-header -->
        <div class="collapse navbar-collapse" id="navbar-content">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#"></a>
                </li>
                <li class="active">
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
                <li>
                    <a href="#">Link</a>
                </li>
            </ul>
        </div><!-- ./collapse -->
    </div><!-- /.container-fluid -->
</nav>

<br> 1 
<br> 2 
<br> 3 
<br> 4 
<br> 5 
<br> 6 
<br> 7 
<br> 8 
<br> 9 
<br> 10 


</body>

CSS

body {
    padding-top: 50px;
}

.logo {
    padding: 2px 15px;
}

.alert-server {
  border-radius: 0;
  position:fixed;
  top:0;
  width:100%;
  padding:10px 0;
  text-align:center;
  display:none;
}

.margin-top-0 { margin-top: 0px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-top-40 { margin-top: 40px !important; }

JavaScript

setTimeout(function () {

    // working
    $("#notificationBar").css({"display":"block"});
    $('#notificationBar').html('Hello User! Welcome!').addClass('margin-top-0', 2000);
    $('body, .navbar').addClass('margin-top-40', 2000);

}, 2000);

setTimeout(function () {

        // not working
        $('#notificationBar').removeClass('margin-top-0', 2000).html().css({"display":"none"});
        $('body, .navbar').removeClass('margin-top-40', 2000);

    }, 6000);