隐藏在绝对定位元素

Question

我尝试使用粘性标头实现内容div而不使用粘性。对于绝对定位元素隐藏内容滚动条的部分，我的方法通常可以正常工作。

有没有办法让内容仍在绝对定位的元素下但滚动条位于顶部？

HTML：

<link rel="stylesheet" type="text/css" href="main.css">

<div class="container">
    <div class="menu">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
    </div>

    <div class="content">

        <div class="contentBar">
        </div>

        <div class="contentscroll">
            <span id="clickable">
                Clickable text
            </span>

            <div class="contentitem">
            </div>
            <div class="contentitem">
            </div>
            <div class="contentitem">
            </div>
        </div>
    </div>
</div>

CSS

.html,body{
    margin:0px;
    padding:0px;
}

/*  */
.container{
    display:flex;
    flex-direction: row;
    position:relative;
    height:100%;
}

/* SIDEMENU RELATED */

.menu{
    width:200px;
    /* left:20px; */
    background-color:rgb(197, 228, 201);
}

.menuClosed{
    width:0px;
    background-color:rgb(197, 228, 201);
    transition: 0.3s all;
}

/* CONTENT RELATED */

.content{
    background-color:rgb(236, 167, 110);
    flex:1;
    position:relative;
}

.contentscroll{
    overflow: scroll;
    height:100%;
}

.contentBar{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    height:200px;
    background-color:gray;
}

.contentitem{
    height:400px;
    margin:20px;
    background-color:rgb(206, 103, 19)
}

jsbin：

https://jsbin.com/suvetoduqu/edit?html,css,output

Answer 1

您可以做的一件事是添加一个假内容栏，其内容条与内容栏相同。查看已修复的滚动问题。

在html中添加了<div class="contentBarfake"></div>，在样式中添加了.contentBarFake。

＆＃13;

＆＃13;

.html,body{
    margin:0px;
    padding:0px;
}

/*  */
.container{
    display:flex;
    flex-direction: row;
    position:relative;
    height:100%;
}

/* SIDEMENU RELATED */

.menu{
    width:200px;
    /* left:20px; */
    background-color:rgb(197, 228, 201);
}

.menuClosed{
    width:0px;
    background-color:rgb(197, 228, 201);
    transition: 0.3s all;
}

/* CONTENT RELATED */

.content{
    background-color:rgb(236, 167, 110);
    flex:1;
    position:relative;
}

.contentscroll{
    overflow: scroll;
    height:100%;
}

.contentBar{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    height:200px;
    background-color:gray;
}
.contentBarfake{
  position:relative;
    width:100%;
    top:0px;
    left:0px;
    height:200px;
}
.contentitem{
    height:400px;
    margin:20px;
    background-color:rgb(206, 103, 19)
}

@media (max-width: 500px){

}

＆＃13;

<link rel="stylesheet" type="text/css" href="main.css">

<div class="container">
    <div class="menu">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
    </div>

    <div class="content">

        <div class="contentBar">
        </div>
      <div class="contentBarfake">
        </div>

        <div class="contentscroll">
            <span id="clickable">
                Clickable text
            </span>

            <div class="contentitem">
            </div>
            <div class="contentitem">
            </div>
            <div class="contentitem">
            </div>
        </div>



    </div>
</div>

<script src="index.js"></script>

＆＃13;

＆＃13;

＆＃13;