jquery - 使固定定位的 div 继承父级的宽度而不是 body

Question

我正在尝试在我的 HTML 页面上实现一个粘性标题，当用户向下滚动时，标题会粘在页面顶部。

我已经实现了 sticky header 功能，但是我遇到了一个问题，当 div class="header-content"固定在页面顶部时，它会溢出它所在的容器的宽度并尝试获取整个“ body ”的宽度。我希望这个粘性 header 占其容器宽度的 100%。

我的 HTML 在这里:

<div class="container">
    <header id="header" role="banner">
            <div class="search">
                <form id="searchForm" action="#" method="get">
                    <input class="form-control search-input" name="q" id="q" placeholder="Search..." type="text" required />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Button</button>
                    </span>
                </form>
            </div>

            <div class="header-content">
                <ul class="social-icons">
                    <li>List Item</li>  
                    <li>List Item</li>  
                    <li>List Item</li>  
                    <li>List Item</li>
                 </ul>

                <div class="logo">
                    <h1>Sample Logo</h1>
                </div>

            </div><!-- end header-content -->   
        </header><!-- end header -->

       <div id="main">
           <h2>Heading Goes Here</h2>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h3>Second Heading Goes Here</h3>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h2>Heading Goes Here</h2>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h3>Second Heading Goes Here</h3>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>

       </div><!-- end main -->

</div><!-- end container -->

CSS:

.container {width: 600px; margin: auto; background: #eee;} 
#header {width: 100%;}
.header-content {width: 100%; z-index: 400;}
.sticky {position: fixed; top: 0; transition: all 0.4s ease; background: red;}

用于粘性 header 的 jQuery:

     $(window).scroll(function() {
        if ($(this).scrollTop() > 30){  
            $('.header-content').addClass("sticky");
          }
          else{
            $('.header-content').removeClass("sticky");
          }
      });

我还制作了一个 JSFiddle，因此您可以实时查看此问题。您可以在这里查看:
https://jsfiddle.net/eng94871/

请注意，当您向下滚动并且 header 粘在顶部(红色背景的 div)时，它会溢出其容器(灰色背景的 div)。我想强制它具有 100% 宽度的灰色背景。

Answer 1

问题是因为 position: fixed 元素不在通常的文档流中，因此它们的宽度被认为是窗口的 100%。您可以通过在元素上指定与在 .container 上相同的 width 属性来解决此问题。另请注意，您需要将 transition: all 更改为 transition: background-color 否则宽度是动画的，我不相信这是您想要的效果.试试这个:

.sticky {
    width: 600px;
    transition: background-color 0.4s ease;
    /* other properties... *.
}

Example fiddle