bootstrap navbar固定トップとボディパッティングトップ

ウィンドウをスクロールするときに固定トップナビゲーションを作成しようとしています。私はそれをしましたが、上部の領域が再び見えるようになると、ボディパッディングトップに問題があります。パディングはボディに自動的に追加されますが、ナビゲーションバーに固定トップクラスがある場合にのみ適用する必要があります。画像を見る（上部が見えるようになるとき）bootstrap navbar固定トップとボディパッティングトップ

この問題をどのように修正するには？

サイトは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 
 
    } 
 
});

私は、サイト上のトップ領域の下にあるブートストラップナビゲーション（ナビゲーションバーナビゲーションバー-デフォルト）を持っていますこれはコード

です

<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:[email protected]" title="Pošaljite nam e-mail">[email protected]</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 -->

出典

2016-05-08 Mile Mijatovic

だけ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'); 
    } 
});

出典

2016-05-08 19:40:32

どうもありがとう、それはそれだ...しかし、やるます0pxをパディングするときに、ボディからクラスを完全に削除する方法を知っていますか？ http://prntscr.com/b1s9ct –

'addClass（）'と 'removeClass（）'を使って遊ぶことができ、 'body'タグの' padding-top'のデフォルト値を設定します。 –

はい、知っていますが、$（ 'body'）を追加すると何も起こりません。removeClass（ '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"))-109);  
    } else { 
    $('.navbar-default').removeClass('navbar-fixed-top'); // Unfixed Menu 
    } 
});

出典

2016-05-08 19:46:05 satya

いいえ、この解決策は良くない、再び同じ問題 –

bootstrap navbar固定トップとボディパッティングトップ

答えて

関連する問題