Bootstrap: Исправлены потоки div за пределами контейнера

Question

У меня проблема, когда внутри моего заголовка у меня есть div, который я хочу зафиксировать сверху, когда пользователь прокручивает. Однако, когда я устанавливаю позицию: фиксированный для элемента, он ускользает от родительского .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 всегда будут в центре, значит, левое пространство и правые пространства будут равны.

Теперь вы можете избавиться от width:100% от .fixed-head.