Question

我希望我的内容是唯一受滚动影响的内容。其他要素应保持不变。内容不应该落在标题或其他工具之后。

到目前为止我尝试了什么： https://jsfiddle.net/1L9Lnqho/

<header> <!-- This is a fixed header with transparency -->
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
            <a href="#">Home</a>
        </li>
        <li role="presentation">
            <a href="#">Profile</a>
        </li>
        <li role="presentation">
            <a href="#">Messages</a>
        </li>
    </ul>
</header>

<section class="container">
    <div class="col-xs-4">
        <ul class="nav nav-pills nav-stacked nav-pills-stacked-example fix-me"> 
            <li role="presentation" class="active"><a href="#">Yes</a></li> 
            <li role="presentation"><a href="#">This</a></li> 
            <li role="presentation"><a href="#">Is</a></li> 
            <li role="presentation"><a href="#">Silly</a></li> 
        </ul>
    </div>

    <div class="col-xs-8">
        <div class="toolbar fix-me"> 
            <span>TOOL 1</span>
            <span>TOOL 2</span>
            <span>TOOL 3</span>
        </div>
        <div> 
        <b>
            I want this to scroll but the other buttons and 
            layout should stay in place.
            And the scrollbar should stay on the body.
        </b>
        A lot of data here...
        </div>
    </div>
</section>

的CSS：

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 90px;
}

section {
    padding: 15px;
    border: solid  1px rgba(155,155,155,0.3);
    border-radius: 3px;
    margin-top: 100px;
}

.fix-me {
    position: fixed;
}

主要问题是在标题和侧边栏之间有一个透明的间隙，当我滚动时获取其间的内容。我想在这里隐藏内容。

Answer 1

您可以在body和overflow-y上添加overflow-y：none：滚动部分以使内容仅在该部分滚动

Answer 2

您应该使用带正值的z-index属性..

Answer 3

我认为这就是你想要的，

你甚至不需要为这些元素固定位置，或者你想要它的最佳方法（在我看来）是从section.container中提取ul和工具栏，或者做导航，工具栏和文本内容section.container中的所有兄弟。

HTML

<header>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
            <a href="#">Home</a>
        </li>
        <li role="presentation">
            <a href="#">Profile</a>
        </li>
        <li role="presentation">
            <a href="#">Messages</a>
        </li>
    </ul>
</header>

<section class="container section-container">
    <div class="col-xs-4">
        <ul class="nav nav-pills nav-stacked nav-pills-stacked-example"> 
            <li role="presentation" class="active"><a href="#">Yes</a></li> 
            <li role="presentation"><a href="#">This</a></li> 
            <li role="presentation"><a href="#">Is</a></li> 
            <li role="presentation"><a href="#">Silly</a></li> 
        </ul>
    </div>

    <div class="col-xs-8">
        <div class="toolbar"> 
            <span>TOOL 1</span>
            <span>TOOL 2</span>
            <span>TOOL 3</span>
        </div>
        <div class="text-content"> 
          <!-- LOREM IPSUM HERE -->
        </div>
    </div>
</section>

CSS

header {
    width: 100%;
    height: 90px;
}

section {
    padding: 15px;
    border: solid  1px rgba(155,155,155,0.3);
    border-radius: 3px;
    margin-top: 100px;
}



.section-container {
  position: relative;
  border: 2px solid black;
  height: auto;
  margin: 0;
  padding-top: 4em;
}

.text-content {
  overflow-y: auto;
  border: 2px solid red;
  margin-top: 1em;
  max-height: 500px;
}

PD：仅用于测试目的的边框

固定位置的布局问题

3 个答案:

HTML

CSS