Placeholder script not applying when javascript asks for it

Question

I'm trying to make a nav bar to become fixed when reaches the top of the page. The problem is that it jumps when changing from one position to another. Im trying to use a placeholder but the placeholder doesn't seem to apply. Any suggestions?

#navbar {
    width: 900px;
    height: 50px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #893C06, 0.8;
    margin-top: 5px;
    margin-left: 30px;
    float: left; }

#holder {
    width: 900px;
    height: 50px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin-top: 5px;
    margin-left: 30px;
    float: left;
    display: none; }

.placeholder {
    display: block; }

$(document).ready(function () {
  var top = $('#navbar').offset().top - parseFloat($('#navbar').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top) {
      $('#navbar').addClass('fixed');
      $('#holder').addClass('placeholder');
    } else {
      $('#navbar').removeClass('fixed');
      $('#holder').addClass('placeholder');
    }
  });
});

Answer 1

Change this

.placeholder {
display: block; }

to

.placeholder {
display: block !important; }

And

 if (y >= top) {
      $('#navbar').addClass('fixed');
      $('#holder').addClass('placeholder');
    } else {
      $('#navbar').removeClass('fixed');
      $('#holder').addClass('placeholder');
    }

In both side of if you are adding class placeholder. So side must be removeClass('placeholder');