javascript - 根据高度固定标题自动调整内容部分的边距顶部

Question

我到处搜索并找到了很多“解决方案”，但似乎没有一个对我有用。我是新手/成熟开发者。

我有一个固定的标题。滚动时标题正在调整大小。 我知道如果我将 padding-top: 100px 放在例如我的内容保持低于我的固定标题。但是由于固定标题在滚动时会改变大小，所以我希望 content 部分的 top-padding 根据固定标题的大小自动调整。

<header id="main-header" class="">
    <div class="wrapper">
        <div id="navigation">
            <nav id="top-menu-nav">
                <ul id="top-menu" class="nav">
                   <li> menu 1</li>
                </ul>                   
            </nav>
        </div>
    </div>
</header>
<div id="content">

CSS

#main-header{position:fixed;z-index:99999;width:100%}
#content{position:relative}

没有，我试过将以下脚本放在我的页眉中，但它不起作用。我做错了什么？

脚本

<script>
    $(window).resize(function(){
    var height = $('#main-header').height();
    $('#content').css({'padding-top':height});
    }).trigger('resize');
</script>

Answer 1

这应该按预期工作。我为标题应用了位置并为内容设置了边距而不是填充。

$(window).resize(function() {
  var height = $('#main-header').height();
  $('#content').css({
    'margin-top': height
  });
}).trigger('resize');

#main-header {
  position: fixed;
  z-index: 99999;
  width: 100%;
  top: 0;
  left: 0;
  /* For visibility */
  background-color: lightgreen;
}

#content {
  /* For visibility */
  width: 100%;
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="main-header" class="">
  <div class="wrapper">
    <div id="navigation">
      <nav id="top-menu-nav">
        <ul id="top-menu" class="nav">
          <li> menu 1</li>
        </ul>
      </nav>
    </div>
  </div>
</header>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>