bootstrap navbar fixed top and body padding top

Question

I am trying to create fixed top navigation when scroll the window and from the point when top area becomes invisible. I did it but I have problem with body padding top when top area becomes visible again. Padding is added automatically to body, but should not, need only to be applied when navbar has an fixed-top class. See the picture (when top area becomes visible)

How to fix that problem with padding?

Site is live here

JavaScript

//FIXED NAVBAR ON SCROLL 

$(document).scroll(function(event) {

  var wintop = $(window).scrollTop(); // Winodw Scroll Positon
  var topArea = $('.top-area').outerHeight(); // Header Logo Div Height

  if (wintop > topArea) {
    $('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
    $('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
  } else {
    $('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
  }
});

I have bootstrap navigation (navbar navbar-default) which is below top-area on site, this is code

<div class="top-area">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-4">
        <p class="address">Maršala Tita br. 54, Gložan 21412, Srbija</p>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-8 information text-right">
        <ul class="contact">
          <li class="email"><a href="mailto:support@uram.co.rs" title="Pošaljite nam e-mail">support@uram.co.rs</a>
          </li>
          <li class="telephone">+381 21 788 584</li>
          <li class="fax">+381 21 788 584</li>
        </ul>
        <ul class="social">
          <li>
            <a href="http://www.facebook.com" target="_blank" title="Pratite nas na Facebook-u">
              <i class="fa fa-facebook" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="http://www.plus.google.com" target="_blank" title="Pratite nas na Google plus">
              <i class="fa fa-google-plus" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="http://www.twitter.com" target="_blank" title="Pratite nas na Twitter-u">
              <i class="fa fa-twitter" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="http://www.vimeo.com" target="_blank" title="Pratite nas na Vimeo">
              <i class="fa fa-vimeo" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="http://www.youtube.com" target="_blank" title="Pratite nas na YouTube">
              <i class="fa fa-youtube-play" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <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" href="http://mile.x3.rs/mile/uram/" title="Uram System - Dobrodošli">
        <img src="http://mile.x3.rs/mile/uram/img/logo.jpg" alt="Uram System Logo">
      </a>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse">
      <nav>
        <ul class="nav navbar-nav">
          <?php $currentPage=( basename($_SERVER[ "SCRIPT_NAME"])); ?>
          <li <?php if ($currentPage=='index.php' ) { echo "class='active'"; } else {echo '';} ?>><a href="http://mile.x3.rs/mile/uram/" title="Početna">Početna</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="O nama">O nama <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" title="Naša kompanija">Naša kompanija</a>
              </li>
              <li><a href="#" title="Istorijat">Istorijat</a>
              </li>
              <li><a href="#" title="Nagrade i priznanja">Nagrade i priznanja</a>
              </li>
              <li><a href="#" title="Rukovodstvo">Rukovodstvo</a>
              </li>
            </ul>
          </li>
          <li><a href="#" title="Proizvodi">Proizvodi</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="http://mile.x3.rs/mile/uram/reference.php" title="Knjaz Miloš, Aranđelovac">Fabrika Knjaz Miloš, Aranđelovac</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Partneri">Partneri <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" title="Partner 1">Partner 1</a>
              </li>
              <li><a href="#" title="Partner 2">Partner 2</a>
              </li>
              <li><a href="#" title="Partner 3">Partner 3</a>
              </li>
              <li><a href="#" title="Partner 4">Partner 4</a>
              </li>
              <li><a href="#" title="Partner 5">Partner 5</a>
              </li>
              <li><a href="#" title="Partner 6">Partner 6</a>
              </li>
            </ul>
          </li>
          <li <?php if ($currentPage=='novosti.php' ) { echo "class='active'"; } else {echo '';} ?>><a href="http://mile.x3.rs/mile/uram/novosti.php/" title="Novosti">Novosti</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Download">Download <i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#" title="Download 1">Download 1</a>
              </li>
              <li><a href="#" title="Download 2">Download 2</a>
              </li>
              <li><a href="#" title="Download 3">Download 3</a>
              </li>
              <li><a href="#" title="Download 4">Download 4</a>
              </li>
              <li><a href="#" title="Download 5">Download 5</a>
              </li>
              <li><a href="#" title="Download 6">Download 6</a>
              </li>
            </ul>
          </li>
          <li <?php if ($currentPage=='kontakt.php' ) { echo "class='active'"; } else {echo '';} ?>><a href="http://mile.x3.rs/mile/uram/kontakt.php/" title="Kontakt">Kontakt</a>
          </li>
          <li>
            <a style="visibility: visible;" class="search-button" href="#">
              <i class="fa fa-search" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- /.nav navbar-nav -->
        <div style="display: none;" class="bg-white hide-show-content no-display header-search-content">
          <form class="navbar-form vertically-absolute-middle">
            <div class="form-group">
              <input placeholder="Unesite pojam za pretragu ovde" class="form-control" id="s" name="s" value="" type="text">
            </div>
          </form>
          <button class="close">
            <i class="fa fa-times" aria-hidden="true"></i>
          </button>
        </div>
      </nav>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</div>
<!-- /.navbar navbar-default navbar-fixed-top -->

Answer 1

Please try this:

$(document).scroll(function(event) {

  var wintop = $(window).scrollTop(); // Winodw Scroll Positon
  var topArea = $('.top-area').outerHeight(); // Header Logo Div Height

  if(wintop > topArea){
    $('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
    $('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height"))-109);     
    } else {
    $('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
  }
});

Answer 2

Just remove the padding-top in the else statement :

$(document).scroll(function(event) {

  var wintop = $(window).scrollTop(); // Winodw Scroll Positon
  var topArea = $('.top-area').outerHeight(); // Header Logo Div Height

  if (wintop > topArea) {
    $('.navbar-default').addClass('navbar-fixed-top'); // Fixed Menu
    $('body').css('padding-top', parseInt($('.navbar-fixed-top').css("height")) + 1);
  } else {
    $('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu
    $('body').css('padding-top', '0px');
  }
});