我试图在滚动窗口时以及从顶部区域变得不可见时创建固定的顶部导航。我做到了，但是当顶部区域再次可见时，我的 body 填充顶部有问题。填充自动添加到主体，但不应该，只需要在导航栏具有固定顶部类时应用。查看图片(当顶部区域可见时)
如何解决填充问题？
网站已上线 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
}
});我在网站顶部区域下方有 Bootstrap 导航(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 -->最佳答案
只需删除 else 语句中的 padding-top 即可:
$(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');
}
});
关于javascript - Bootstrap 导航栏固定顶部和 body 填充顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37103999/