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。

Bootstrap：固定div在容器外流动

1 个答案: