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

【问题标题】：Make fixed positioned div inherit width of parent instead of body使固定定位的 div 继承父级的宽度而不是 body
【发布时间】：2015-11-16 17:04:51
【问题描述】：

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

我已经实现了粘性标题功能，但我遇到了一个问题，即当 div class="header-content" 固定在页面顶部时，它会溢出它所在容器的宽度并尝试获取整个“身体”的宽度。我希望这个粘性标题是其容器宽度的 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;}

粘性标题的jQuery：

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

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

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

【问题讨论】：

标签： jquery html css

【解决方案1】：

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

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

Example fiddle

【讨论】：

我需要这个“粘性”来响应，所以我不能给它一个固定的宽度。也许有一种方法可以使用 jquery 来做到这一点，即 jQuery 会获取 '.container' 的宽度并将 '.sticky' 的宽度设置为那样？

【解决方案2】：

尝试将容器设置为一种宽度：

.container, .sticky, .header-content {
     width: 600px;
}

jsfiddle

【讨论】：

【解决方案3】：

尝试将 .sticky width 设置为 calc(100%) ，这应该是 sticky 父元素 #header 元素的 100%

jsfiddle https://jsfiddle.net/eng94871/5/embedded/result/

【讨论】：