Question

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

我已实现了粘贴标头功能，但我遇到的问题是当div class =＆＃34; header-content＆＃34;变得固定在页面的顶部，它溢出了它所在的容器的宽度，并试图占据整个身体的宽度＆＃39;。我希望这个粘性标题是其容器宽度的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％的灰色背景宽度。

Answer 1

问题是因为[TestMethod] [TestCategory("Unit")] public async Task Test_MyMethod() { using (var server = TestServer.Create<TestStartup>()) { //Arrange server.BaseAddress = new Uri("https://localhost"); var jsonBody = new JsonMyRequestObject(); var request = server.CreateRequest("/api/v1/MyMethod") .And(x => x.Method = HttpMethod.Post) .And(x => x.Content = new StringContent(JsonConvert.SerializeObject(jsonBody), Encoding.UTF8, "application/json")); //Act var response = await request.PostAsync(); var jsonResponse = JsonConvert.DeserializeObject<JsonMyResponseObject>(await response.Content.ReadAsStringAsync()); //Assert Assert.IsTrue(response.IsSuccessStatusCode); } }元素不在通常的文档流中，因此它们的宽度被视为窗口的100％。您可以通过在元素上指定与position: fixed上相同的width属性来解决此问题。另请注意，您需要将.container更改为transition: all，否则宽度会动画，我不相信这是您之后的效果。试试这个：

transition: background-color

Example fiddle

Answer 2

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

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

Answer 3

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

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

jsfiddle

固定定位div继承父而不是body的宽度

3 个答案: