html - Bootstrap : Fixed div flows outside container

Question

我遇到一个问题，在我的页眉中有一个 div，我想在用户滚动时将其固定在顶部。但是，当我设置 position:fixed 到元素时，它会在右侧转义父 .container 但在左侧保留填充。我完全迷失了这一点......任何建议将不胜感激，谢谢!

HTML

<header class='banner'>
  <div class="container">
    <div class='row'>
      <div class='col-md-12'>
        <div class='site-header'>
          <div class='fixed-head'>
            <div class='site-nav col-md-5 col-sm-7 col-xs-12'>
              <div class='row'>
                <div class='logo col-md-7 col-sm-7 col-xs-9'>
                  <h1>Lend Lease <span>Love it!</span></h1>
                </div>
                <ul class='region-select col-md-5 col-sm-4 col-xs-3'>
                  <li>
                      NSW <span class='glyphicon glyphicon-chevron-down'></span>
                  </li>
                </ul>
              </div>
              <div class='row'>
                <ul class='regions'>
                  <li>
                    QLD
                  </li><li>
                    SA
                  </li><li>
                    WA
                  </li><li>
                    VIC
                  </li><li>
                    ACT
                  </li>
                </ul>
              </div>
            </div>
            <div class='register col-md-3 col-sm-5 col-xs-12 pull-right'>
              <a href="#">Register for Updates <img src="<?php echo get_template_directory_uri(); ?>/assets/img/pencil.png"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

CSS

.banner {
   .site-header {
      background: url(http://placehold.it/1140x500&text=Header+Image);
      background-position: center;
      height: 500px;
      position: relative;


      .fixed-head {
         position: fixed;
         width: 100%;
         z-index: 99999;
      }

      .site-nav {
         background: @blue;

         h1 {
            margin: 0;
            color: #fff;
            font-size: 18pt;
            padding: 15px 0px;
         }

         span {
            font-size: 14pt;
         }

         ul.region-select {
            margin: 0;
            padding: 0;
            font-size: 0;
            text-align: right;
            float: right;
            li {
               display: inline-block;
               color: #fff;
               padding: 15px 30px;
               line-height: 2em;
               background: @orange;
               margin: 0;
               font-size: 12pt;

               span {
                  font-size: 10pt;
               }
            }

            .navicon {
               text-rendering: geometricPrecision;
               padding: 15px 10px;
            }
         }

         ul.regions {
            display: none;
            margin: 0;
            padding: 0;
            li {
               display: inline-block;
               background: #fff;
               width: 20%;
               text-align: center;
               padding: 15px;
               border-right: 1px solid @tan;

               &:last-child {
                  border: none;
               }
            }
         }
      }

      .register {
         background: @blue;
         padding: 15px 0px;
         font-size: 12pt;
         text-align: center;

         a {
            color: #fff;
            font-size: 12pt;
            line-height: 2em;
         }

         img {
            padding: 0 10px;
            padding-bottom: 2px;
         }
      }
   }
}

截图:https://www.dropbox.com/s/pg9mlzz4f7aelo9/Screenshot%202014-01-03%2015.47.16.png

Answer 1

定位固定元素不关心父定位和盒模型。因此，给固定元素 width 100%; 而没有声明 left/right 是导致问题的原因。

在这种情况下，您也不能为左/右设置固定(硬编码)值。你必须让你的容器左偏移位置和右偏移位置，然后相应地应用。

需要 JS。

var leftPos = $(".site-header").offset().left  + "px";
$(".fixed-head").css({left: leftPos, right: leftPos});

这里 leftPos 值可以为固定元素的左/右共享。因为容器或您的 .site-header 始终位于中心，这意味着左侧空间和右侧空间将相等。

现在您可以从 .fixed-head 中删除 width:100%。