動態調整高度

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; 
} 

整個文件引擎收錄，可以發現HERE

我使用引導V4

查看在移動視圖站點被觀察到以下：

導航的可摺疊部分被左「裸」不帶黑色的背景。我想是得到以下效果：

我不能使用類「導航欄」的，因爲不知它與固定頂部導航上滾動干擾。如何在移動視圖中獲取導航的可移動部分的背景以顯示黑色？我嘗試使用jquery動態調整.fixed的高度，但它不起作用。

Answer 1

最好把你的代碼放到JSfiddle或CodePen等更普遍使用的東西中。

由於我沒有引擎收錄帳戶，不能輕易運行的代碼，我會採取一種猜測。根據我在這裏可以看到的內容，因爲您的導航正在獲得.fixed級別的固定height: 50px;，因此您不會得到菜單後面的黑色背景，因爲它只有50px高。

嘗試將其更改爲height: auto;，假設它獲得.fixed之前高度50像素。我還會在其上添加transition: height Xs;，因爲當height設置爲auto時，它將「增長」以覆蓋菜單。

編輯

一個很大的問題，這裏是你已經宣佈.nav一個top和bottom值。這導致了.fixed nav的全高。所以刪除。

那麼你的jQuery下半年改成這樣：

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

所以被點擊.navbar-toggler時，我們添加height: auto;到nav。

這在測試時爲我工作，儘可能讓導航欄擴展到包括菜單項沒有去全瀏覽器的高度。

我認識到，拉bottom: 0出從nav會導致相對#screen1安置問題，但我不明白你爲什麼把nav這一節裏面反正。我會把它放在#section1和#section2之間。

您可以將#section1的高度更改爲calc(100vh - 50px)，以便導航欄完全適合屏幕底部。