时间戳

首页 > 解决方案 > 根据高度固定标题自动调整内容部分的边距顶部

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

问题描述

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

我有一个固定的标题。滚动时标题正在调整大小。我知道，如果我把padding-top: 100px我的内容放在我的固定标题之下。但是随着滚动时固定标题的大小发生变化，我希望根据固定标题的大小自动调整top-padding该部分的大小。content

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

标签： javascripthtmlcss

解决方案

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

$(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>

推荐阅读