时间戳

首页 > 解决方案 > 防止左列flexbox（导航）与主要内容一起滚动？

html - 防止左列flexbox（导航）与主要内容一起滚动？

问题描述

我有一个用作导航的左栏，右侧是主要内容。当我滚动以查看有关主要内容的更多信息时，导航栏也开始滚动。如何防止这种情况？使左列像具有位置一样工作：绝对？

<nav>
</nav>
<main>
</main>

body{
display:flex;
}

nav{
width:300px;
}

main{
width:100%;
padding:45px;
}

标签： htmlcss

解决方案

Nav中的“cont” div包含您的导航结构

<nav>
  <div class="cont"></div>
</nav>
<main>
</main>

而你的 css Parent Nav 是

“位置：相对”

和孩子 div 是

位置：粘性和顶部：0

 body{
    display:flex;
    }
    
  nav{
    width:300px;
    position:relative;
    }

  nav>div{
    width:100%;
    position:sticky;
    top:0;
    height:2rem;
    }
    
  main{
    width:100%;
    padding:45px;
    }

在这里检查jsFiddle

推荐阅读