bootstrap navbar固定顶部和身体填充顶部
我正在尝试在滚动窗口时创建固定顶部导航，并从顶部区域变为不可见时创建。我做了但是当顶部区域再次可见时我身体填充顶部有问题。填充自动添加到正文，但不应该只在导航栏具有固定顶级类时应用。查看图片（当顶部区域变得可见时）
如何使用填充修复该问题？
网站已上线here
JavaScript
＆＃13;
＆＃13;
＆＃13;
＆＃13;
//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），位于网站顶部区域下方，这是代码
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<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 -->
2 个答案:
答案 0 :(得分：0)
只需删除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');
}
});
答案 1 :(得分：0)
请试试这个：
$(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
}
});
相关问题
- Bootstrap固定导航栏：padding-top和body 100％
- bootstrap 3 navbar-right没有使用navbar-fixed-top填充
- 合并navbar-fixed-top和navbar-static-top
- Bootstrap navbar-fixed-top
- bootstrap navbar固定顶部和身体填充顶部
- navbar-fixed-top坚持顶部
- 如果你有一个固定的导航栏和身体填充顶部，如何使jumbotron 100％高度？
- Remove body padding for fixed navbar
- Bootstrap导航栏固定顶部
- Navbar and THead Fixed-Top
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？