CSS固定元素出现在滚动条上方

Question

CSS固定元素出现在滚动条上方

4

我看到一些关于类似问题的提问，但是没有一个指定的答案实际上适用于这个问题。

考虑以下代码片段：

$(function () {
  $(window).on('scroll', function () {
    /**
      THIS SHOULD NOT BE CALLED!!!
      So, change some colors to warn about it, if it happens.
    */
    $('#content').css('background-color', 'red');
  });
});

body {
  margin:0;
  padding:0;
    
  height: 100%;
  width: 100%;
}

#container {
  position: absolute;
    
  height: 100%;
  width: 100%;
  z-index: 9999999;
    
  overflow: auto;
}

#nav {
  background-color:rgb(50,50,50);
  color: white;

  position: fixed;
  left: 0;
  top: 0;
  
  width: 100%;
  height: 30px;
  padding-top: 10px;
  z-index: 100;
}

#content-wrapper {
  background-color:rgb(200,200,200);

  min-height: 100%;
  height: auto !important;
  width: 100%;
  z-index:2;
}

#content {
  padding-top: 40px;
  padding-bottom: 40px;
}

#footer {
  background-color: rgb(220, 220, 240);
  
  position: fixed; 
  left: 0;
  bottom: 0;

  height: 30px;
  width: 100%;
  padding-top: 10px;
  z-index: 9999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="nav">
    Navbar
  </div>
    
  <div id="content-wrapper">
    <div id="content">
      <div>
        Begin
      </div>
      <div style="height: 600px;">
        ...
      </div>
      <div>
        End
      </div>
    </div>
  </div>
    
  <div id="footer">
    Footer
  </div>
</div>

滚动条位于nav和footer下方。由于这非常重要，只有container元素滚动（BODY元素不应滚动），我该如何解决？是否可能？

HTML结构应该基本上符合此问题的建议（固定导航栏、全高度内容等）。我尝试了几个技巧：修改z-index，包装各种东西等，但我感到很困惑。

目标浏览器是Google Chrome，因为这是该应用程序中使用的浏览器。理想的解决方案将使固定元素调整其宽度以弥补对container元素的overflow: auto;。

- Yanick Rochon

#container 元素需要滚动吗？您是否可以只滚动 #content，因为似乎您总是希望 nav 和 footer 保持固定位置？ - TheLeggett

@TheLeggett 是的，那可能是一个可行的解决方案。 - Yanick Rochon

3个回答

4

在这个fiddle中演示

另一种方法是只滚动你的示例中的#content-wrapper。以下是如何实现的基本示例：

HTML

<div id="container">
    <div id="nav">
        Navbar
    </div>

    <div id="content-wrapper">
        <div id="content">
            <div>
                Begin
            </div>
            <div style="height: 600px;">
                ...
            </div>
            <div>
                End
            </div>
        </div>
    </div>

    <div id="footer">
        Footer
    </div>
</div>

CSS

body {
    margin:0;
    padding:0;
    height: 100%;
    width: 100%;
}

#container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#nav {
    background-color:rgb(50,50,50);
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    padding-top: 10px;
}

#content-wrapper {
    position:absolute;
    top:40px;
    bottom:40px;
    left:0;
    right:0;
    background-color:rgb(200,200,200);
    width: 100%;
    overflow:scroll;

}

#footer {
    background-color: rgb(220, 220, 240);
    position: fixed; 
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    padding-top: 10px;
}

- TheLeggett

1

当然！实际的实现要更复杂一些，我需要适应它（使用Bootstrap和其他需要清理的CSS）。 - Yanick Rochon

0

http://jsfiddle.net/a8xqhh3L/

从 #container 中移除 overflow: auto。

- DivideByZero

抱歉，如果那么简单的话，我一开始就不会问了。请查看 fiddle 的 JS 部分以及在滚动 HTML 视口时的行为。 - Yanick Rochon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lal · Accepted Answer

请查看此处

从#container中删除overflow:auto。

因此，#container的CSS如下：

#container {
  position: absolute;    
  height: 100%;
  width: 100%;
  z-index: 9999999;
}

更新

为#content添加overflow:auto。