时间戳

首页 > 解决方案 > Bootstrap Fixed Navbar .. 如何动态调整内容填充顶部？

twitter-bootstrap-3 - Bootstrap Fixed Navbar .. 如何动态调整内容填充顶部？

问题描述

此问题适用于 Bootstrap v3.3.7 及更高版本（v4 之前）。

我正在使用导航栏固定顶部；当小屏幕断点启动并且导航栏高度在打开时扩展时，我想将内容向下推到导航栏下方（与导航栏静态顶部的工作方式大致相同）。

显示内容未按下的屏幕截图

怎么做？我的方法是为它编写一个特定的 CSS 规则。但是我怎么才能知道小屏幕断点的确切值是多少呢？

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
      <div class="navbar-header pull-right">
            <!-- this is the hamburger, shown on smaller width screens -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
      </div>
      <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">My Home</a></li>
                    <li><a href="#">Menu 1 </a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                </ul>
            </div>
  </div>
</div>

<section id="content">

    <h3>using Fixed-navbar</h3>

  <p>This uses <strong>FIXED NAVBAR (navbar-fixed-top)</strong>, which means navbar DOES NOT scroll out of view... i.e. it remains VISIBLE at all times.<br/>
    However, it does NOT push the content down (the pink section) when the navbar needs to expands via the Hamburger button 
  </p>

  <p>Sed dignissim blah etc...</p>
</section>

代码笔在这里：

标签： twitter-bootstrap-3navbar

解决方案

这是我自己的答案：

起初我尝试使用 transitionend 事件，但事实证明它不能可靠地解决我的问题；不是因为它本身不可靠，而是因为导航高度在过渡结束后没有及时更新。

所以我求助于轮询和其他可靠工作的逻辑

let navContainer$ = $("div.navbar > div.container");
let collapsedDiv$ = $("div.navbar > div.container > div.collapse");

let intervalHandle;
//on hamburger click...
$("button.navbar-toggle").click(() => {

  let heightBeforeTrx = navContainer$.height();
  console.error( 'heightBeforeTrx:', heightBeforeTrx ) //= 50

  if (heightBeforeTrx === 50) {
      //we are moving from collapsed to Expanded...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to exist once expanded
        let test1 = collapsedDiv$.hasClass( "in" );
        if (test1) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top', '176px')
        }
      }, 100 )
  } else {
    //we are moving from Expanded to Collapsed...
      intervalHandle = setInterval( () => {
        console.log('Yo keep polling...')
        //we expect...a class 'collapse.in' to NOT exist once collapsed
        let test2 = collapsedDiv$.hasClass( "in" );
        if (!test2) {
          //STOP THE POLLING...
          clearInterval(intervalHandle);
          console.log('polling ended.')
          $("body").css('padding-top', '50px')
        }
      }, 100 )    
  }
})

现在已经足够好了，应该相应地调整 176px 硬编码；仅适用于 2 个用例，当宽度变得更小时，可能还有其他高度，但我会忽略这些；如果手动重新调整窗口大小，在从汉堡点击扩展后，还需要额外的 jQuery 来推送内容。

推荐阅读