问题描述
我有一个带有顶部菜单栏的页面,在它的下面,我有一个内容列表div和内容div以及带有侧栏的列表中的每个项目。 我正在尝试将侧栏放置在左侧(粘性div),在滚动时固定在某个点,并且内容div可见。
谢谢。
Side bar should be fixed at this point
.div {
display: block;
}
.bodyWrapper {
margin: auto;
width: 90%;
}
.TopPageHeader {
position: fixed;
top: 0;
background: #33669A;
width: 90%;
height: 68px;
padding-bottom: 5px;
padding-top: 5px;
margin: auto;
z-index: 4;
}
.MainMenu {
margin-top: 10px;
display: flex;
}
.PageContent {
width: 100%;
}
.ContentItemList {
top: 78px;
padding-bottom: 10px;
padding-top: 10px;
background-color: grey;
position: sticky;
width: 100%;
z-index: 2;
}
.ItemList {
background-color: white;
overflow-y: auto;
overflow-x: hidden;
}
.ItemList > ul {
padding: 8px;
height: 32px;
margin-bottom: 10px;
margin-top: 10px;
}
.ItemListTitle {
display: inline-block;
height: 32px;
padding-left: 30px;
}
.item1Container {
margin-top: 70px;
}
.itemTitle {
overflow: hidden;
height: 30px;
margin-bottom: 10px;
margin-left: 87px;
font-weight: bold;
font-size: 28px;
}
.itemBody{
position: relative;
}
.Sidebar {
min-height: 200px;
width: 70px;
background-color: antiquewhite;
position: absolute;
top: -40px;
height: calc(100% + 40px);
z-index: 3;
}
.SidebarContent {
position: sticky;
top: 0px;
}
.itemContent {
margin-left: 75px;
}
.item1 {
background-color: green;
height: 500px;
margin-bottom: 70px;
}
.item2 {
background-color: yellow;
height: 600px;
margin-bottom: 70px;
}
.item3 {
background-color: aqua;
height: 500px;
margin-bottom: 70px;
}
.item4 {
background-color: coral;
height: 900px;
margin-bottom: 70px;
}
body {
min-height: 1156px;
}
<div class="bodyWrapper">
<div>
<div class="TopPageHeader">
<div class="MainMenu">
<button style="margin-left: 15px">Menu 1</button>
<button style="margin-left: 15px">Menu 2</button>
<button style="margin-left: 15px">Menu 3</button>
<button style="margin-left: 15px">Menu 4</button>
<button style="margin-left: 15px">Menu 5</button>
</div>
</div>
<div>
<div class="PageContent">
<div class="ContentItemList">
<div class="ItemList">
<ul>
<li id="item1" class="ItemListTitle">
<a title="item1">item1</a>
</li>
<li id="item2" class="ItemListTitle">
<a title="item2">item2</a>
</li>
<li id="item3" class="ItemListTitle">
<a title="item3">item3</a>
</li>
<li id="item4" class="ItemListTitle">
<a title="item4">item4</a>
</li>
</ul>
</div>
</div>
<div id="item1Container" class="item1Container">
<div class="item1">
<div class="itemTitle">
<label>item1 Title</label>
</div>
<div class="itemBody">
<div class="Sidebar">
<div class="SidebarContent">
<button style="height:45px">Side bar 1</button>
<button style="height:45px">Side bar 2</button>
<button style="height:45px">Side bar 3</button>
</div>
</div>
<div class="itemContent">
<div style="height:30px">item1 Content</div>
<div style="height:230px">Content</div>
<div style="height:200px">Content2</div>
</div>
</div>
</div>
</div>
<div id="item2Container" class="item1Container">
<div class="item2">
<div class="itemTitle">
<label>item2 Title</label>
</div>
<div class="itemBody">
<div class="Sidebar">
<div class="SidebarContent">
<button style="height:45px">Side bar 1</button>
<button style="height:45px">Side bar 2</button>
<button style="height:45px">Side bar 3</button>
</div>
</div>
<div class="itemContent">
<div style="height:30px">item2 Content</div>
<div style="height:230px">Content</div>
<div style="height:300px">Content2</div>
</div>
</div>
</div>
</div>
<div id="item3Container" class="item1Container">
<div class="item3">
<div class="itemTitle">
<label>item3 Title</label>
</div>
<div class="itemBody">
<div class="Sidebar">
<div class="SidebarContent">
<button style="height:45px">Side bar 1</button>
<button style="height:45px">Side bar 2</button>
<button style="height:45px">Side bar 3</button>
</div>
</div>
<div class="itemContent">
<div style="height:30px">item1 Content</div>
<div style="height:230px">Content</div>
<div style="height:200px">Content2</div>
</div>
</div>
</div>
</div>
<div id="item4Container" class="item1Container">
<div class="item4">
<div class="itemTitle">
<label>item1 Title</label>
</div>
<div class="itemBody">
<div class="Sidebar">
<div class="SidebarContent">
<button style="height:45px">Side bar 1</button>
<button style="height:45px">Side bar 2</button>
<button style="height:45px">Side bar 3</button>
</div>
</div>
<div class="itemContent">
<div style="height:30px">item1 Content</div>
<div style="height:230px">Content</div>
<div style="height:200px">Content2</div>
<div style="height:400px">Content3</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)