應用頭部高度，體作爲填充頂部的窗口大小調整

Question

我能夠獲取和window.resize應用header爲padding top的height至body。問題是當我試圖調整window全寬的resize功能不工作，我認爲。

var headerHeight = $('header').innerHeight(); 
 
console.log(headerHeight); 
 
function carouselHeight(){ 
 
\t $('body').removeAttr('style'); 
 
\t $('body').css("padding-top", headerHeight); 
 
}; 
 
$(document).ready(function(e) { 
 
\t carouselHeight();  
 
}); 
 
$(window).resize(function(){ 
 
\t carouselHeight(); 
 
});

body { 
 
    min-height: 2000px; 
 
    padding-top: 70px; 
 
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<!-- Fixed navbar --> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <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="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Why Bootstrap</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Why Bootstrap</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="../navbar/">Default</a></li> 
 
      <li><a href="../navbar-static-top/">Static top</a></li> 
 
      <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 
    <div class="container"> 
 

 
     <!-- Main component for a primary marketing message or call to action --> 
 
     <div class="jumbotron"> 
 
     <h1>Navbar example</h1> 
 
     <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> 
 
     <p>To see the difference between static and fixed top navbars, just scroll.</p> 
 
     <p> 
 
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a> 
 
     </p> 
 
     </div> 
 

 
    </div> <!-- /container -->

Answer 1

你必須這樣執行它們：

var headerHeight = $('header').innerHeight(); 
console.log(headerHeight); 
function carouselHeight(){ 
    $('body').removeAttr('style'); 
    $('body').css("padding-top", headerHeight); 
}; 

$(document).ready(carouselHeight); 
$(window).resize(carouselHeight); 

Answer 2

對不起，我發現這個錯誤在我script。功能中沒有提到標題高度。所以它沒有得到正確的高度在調整大小

function carouselHeight(){ 
    var headerHeight = $('header').innerHeight(); 
    $('body').removeAttr('style'); 
    $('body').css("padding-top", headerHeight); 
    console.log(headerHeight); 
    console.log('hi'); 
}; 
$(document).ready(carouselHeight); 
$(window).resize(carouselHeight);