【发布时间】：2016-05-08 19:32:13
【问题描述】：
我正在尝试在滚动窗口时以及从顶部区域变得不可见时创建固定顶部导航。我做到了，但是当顶部区域再次可见时，我的身体填充顶部有问题。填充会自动添加到正文中，但不应该，仅当导航栏具有固定顶部类时才需要应用。查看图片（当顶部区域变得可见时）
如何解决填充问题？
网站上线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
}
});我有引导导航（navbar navbar-default），位于站点顶部区域下方，这是代码
<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 -->【问题讨论】：
标签： javascript jquery html css twitter-bootstrap