動的に高さを調整する

Question

コード内に、スクロール時に固定トップナビゲーションを達成するのに役立つ次のスニペットがあります。

HTML：

<nav> 
    <button class="navbar-toggler navbar-static-top hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header"> 
     &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="navbar-header"> 
     <img class="navbar-brand" src="pics/logonavigation.png"/> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <a class="nav-link smoothScroll" href="#navigation">HOME</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link smoothScroll" href="#about">ABOUT</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link smoothScroll" href="#services">OUR SERVICES</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link smoothScroll" href="#contact">CONTACT US</a> 
      </li> 
     </ul> 
    </div> 
</nav> 

JAVASCRIPT：

<script> 
    $(document).ready(function(){ 
     $(window).bind('scroll', function() { 
     var navHeight = $(window).height() - $('nav').height(); 
      if ($(window).scrollTop() > navHeight) { 
       $('nav').addClass('fixed'); 
      } 
      else { 
       $('nav').removeClass('fixed'); 
      } 
     }); 

     $('.navbar-toggler').click(function() { 
     var newHeight = $('nav').height(); 
      $(".fixed").height(newHeight); 
     }); 
    }); 
</script> 

CSS：

.fixed { 
position: fixed; 
background-color: rgba(0, 0, 0, 0.8); 
top: 0; 
z-index: 1; 
height: 50px; 
} 

ファイル全体のペーストビンが、私は、ブートストラップV4を使用していますHERE

を見つけることができます

観察される次のモバイルビューのサイトを表示：

ナビゲーションの折り畳み可能な部分は、黒色の背景なしで「裸の」ままです。私が希望することは、以下の効果を得ることです：

が、私は何とかそれが固定トップナビゲーション・オン・スクロールに干渉するために、「ナビゲーションバー」クラスを使用することはできません。モバイルビューのナビゲーションの折りたたみ可能部分の背景を黒く表示するにはどうすればよいですか？私はjqueryを使って動的に.fixedの高さを調整しようとしましたが、うまくいきません。

Answer 1

JSfiddleやCodePenのように普遍的に使用されるコードにコードを組み込む方がよいでしょう。

私はペーストビンのアカウントを持っていないので、簡単にコードを実行することはできませんので、私は推測します。ここで見ることができるところによると、あなたのナビはという固定の.fixedクラスを獲得しているため、背後には50pxの高さしかないため、黒い背景はメニューの後ろには出ません。

高さが50pxと仮定してheight: auto;に変更してから、.fixedになるようにしてください。私はtransition: height Xs;を追加します。heightがautoに設定されていると、それはメニューをカバーするために「成長」します。ここ

EDIT

一つの大きな問題は、あなたが.navにtopとbottom値を宣言したということです。これは.fixed navの完全な高さを引き起こしていました。だからそれを取り除く。

次にこれにあなたのjQueryの後半を変更：.navbar-togglerがクリックされたときに

$(function() { 
    $('.navbar-toggler').click(function() { 
    $('nav').css('height', 'auto'); 
    }); 
}) 

だから、我々はnavにheight: auto;を追加します。

これは、ブラウザの高さを上げずにメニュー項目を含めるようにナビゲータを展開するまでは、テスト時に私にとってはうまくいった。

私はnavから出bottom: 0を引っ張っする#screen1への相対的な配置の問題が発生しますが、とにかくそのセクション内navを置く理由を私は理解していないことを認識しています。私は#section1と#section2の間に置くでしょう。

#section1の高さをcalc(100vh - 50px)に変更して、ナビゲーションバーが画面の下部に完全に収まるようにすることができます。