javascript - Position Fixed - 设置宽度等于容器

Question

当用户滚动到足够远时，我一直在尝试将 div 的位置设置为固定。我注意到当 div 的位置设置为固定时，宽度与父元素不同。如何使 position: fixed 的 div 宽度与父元素保持一致？

在此示例中，一旦设置了 position:fixed，我希望底部 div 与黄色框的宽度相同。

http://jsfiddle.net/BYJPB/

这是我的 HTML:

<header>
  <div class="filler-space">
    Filler Space
  </div>
  <div class="toolbar">
    <div class="current-article">
        <div class="progress-bar"></div>
        My article
    </div>
  </div>
</header>

这是我的 CSS:

body {
  padding:0 10px;
  height: 1000px;
}

.filler-space {
  background-color: yellow;
  border:1px solid #000000;
  height: 140px;
}

.toolbar {
  border: 1px solid black;
}

.current-article {
  font-weight: 600;
  height: 100%;
  line-height: 40px;
  overflow: hidden;
  width: 100%;
  z-index: -1;
}

.progress-bar {
  position: absolute;
}

.prog .progress-bar {
  background: none repeat scroll 0 0 #F2F4F7;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0 -10px 0 -10px;
  overflow: hidden;
  right: 0;
  top: 0;
  transition: width 0.1s ease 0s;
  z-index: -1;
  width: 100%;
}

这是我的 JavaScript:

var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');

$(document).scroll(function() {
  var scrollTop = $window.scrollTop();
  if ( scrollTop > 150) {
    $toolbar.css({
        'position' : 'fixed',
        'top' : 0
    });
    $header.addClass('prog');
  }
  else {
    $toolbar.css({
        'position' : 'static',
        'top' : 0
    });
    $header.removeClass('prog');
  }
});

Answer 1

更新你的 js，我不明白你的要求，但我认为这就是你要找的。

if ( scrollTop > 150) {
    $toolbar.css({
        'position' : 'fixed',
        'top' : 0,
        'width':$header.width()
    });

    $header.addClass('prog');
}
else {
    $toolbar.css({
        'position' : 'static',
        'top' : 0
    });
    $header.removeClass('prog');
}