修复了带有响应式垂直文本的侧边栏
Fixed sidebar with responsive vertical text
我想知道如何使我的左侧边栏位置固定，同时保持垂直文本按钮（关于、画廊、联系人）响应 window 高度。
https://jsbin.com/yaniluy/edit?html,css,output
我的网页主要内容应该滚动，但边栏不应该。
感谢您的帮助！
body {
margin: 0;
}
h1 {
text-align: center;
font-size: 36px;
}
a {
margin: 0px auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
top:50%;
left:50%;
writing-mode: tb-rl;
transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
.nav1 {
background-color:red;
position: relative;
height: 20vh;
width: 10%;
}
.section {
float: right;
width: 90%;
}
<div class="section">
<h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>
</div>
<div class="nav1">
<a href="http://www.google.com/">ABOUT</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">GALLERY</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">BOOKS</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">MEDIA</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">CONTACT</a>
</div>
您可以通过 position:fixed 将导航包裹在 div 中轻松实现此目的。我已经修改了您下面的代码，我相信可以达到您想要的结果。
更多关于css的位置属性的信息请访问this webpage。
body {
margin: 0;
}
h1 {
text-align: center;
font-size: 36px;
}
a {
margin: 0px auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
top:50%;
left:50%;
writing-mode: tb-rl;
transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
.nav1 {
background-color:red;
position: relative;
height: 20vh;
//width: 10%; this no longer works since they are contained by the fixed div,
//but you can add this to the fixed element to achieve the same look
}
.fixed {
position:fixed;
width: 10%;
}
.section {
float: right;
width: 90%;
}
<div class="section">
<h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>
</div>
<div class="fixed">
<div class="nav1"><a href="http://www.google.com/">ABOUT</a></div>
<div class="nav1"><a href="http://www.google.com/">GALLERY</a></div>
<div class="nav1"><a href="http://www.google.com/">BOOKS</a></div>
<div class="nav1"><a href="http://www.google.com/">MEDIA</a></div>
<div class="nav1"><a href="http://www.google.com/">CONTACT</a></div>
</div>
试试 position:fixed。非常适合在用户屏幕上制作项目 'fixed'。固定元素，通常不会去任何地方:-)
*{
font-family:sans-serif;
box-sizing:border-box
}
.sidebar{
position:fixed;
top:0;
left:0;
height:100vh;
width:150px;
z-index:10;
background:white;
box-shadow: 4px 4px 9px rgba(0,0,0,.12)
}
.sidebar span{
margin: 5%;
display:block;
padding: 50px 0;
text-align:center;
font-size:20px;
transform:rotate(270deg)
}
.main{
margin-left:170px;
overflow-y:auto;
font-size:50px;
line-height:2
}
<div class="sidebar">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa.
</div>
难点在于使其响应迅速。您可以在移动设备上将其固定显示在顶部，也许吗？
@media(max-width:736px){
.sidebar{
position:fixed;
top:0;
left:0;
height:100px;
width:100%;
z-index:10;
background:white;
box-shadow: 4px 4px 9px rgba(0,0,0,.12);
}
.main{
margin-top:130px;
}
}
这里你必须使用 css 的位置 属性，并将位置设为粘性并在左侧栏上使用该样式。
我想知道如何使我的左侧边栏位置固定，同时保持垂直文本按钮（关于、画廊、联系人）响应 window 高度。
https://jsbin.com/yaniluy/edit?html,css,output
我的网页主要内容应该滚动，但边栏不应该。
感谢您的帮助！
body {
margin: 0;
}
h1 {
text-align: center;
font-size: 36px;
}
a {
margin: 0px auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
top:50%;
left:50%;
writing-mode: tb-rl;
transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
.nav1 {
background-color:red;
position: relative;
height: 20vh;
width: 10%;
}
.section {
float: right;
width: 90%;
}
<div class="section">
<h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>
</div>
<div class="nav1">
<a href="http://www.google.com/">ABOUT</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">GALLERY</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">BOOKS</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">MEDIA</a>
</div>
<div class="nav1">
<a href="http://www.google.com/">CONTACT</a>
</div>
您可以通过 position:fixed 将导航包裹在 div 中轻松实现此目的。我已经修改了您下面的代码，我相信可以达到您想要的结果。
更多关于css的位置属性的信息请访问this webpage。
body {
margin: 0;
}
h1 {
text-align: center;
font-size: 36px;
}
a {
margin: 0px auto;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
top:50%;
left:50%;
writing-mode: tb-rl;
transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
.nav1 {
background-color:red;
position: relative;
height: 20vh;
//width: 10%; this no longer works since they are contained by the fixed div,
//but you can add this to the fixed element to achieve the same look
}
.fixed {
position:fixed;
width: 10%;
}
.section {
float: right;
width: 90%;
}
<div class="section">
<h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>
</div>
<div class="fixed">
<div class="nav1"><a href="http://www.google.com/">ABOUT</a></div>
<div class="nav1"><a href="http://www.google.com/">GALLERY</a></div>
<div class="nav1"><a href="http://www.google.com/">BOOKS</a></div>
<div class="nav1"><a href="http://www.google.com/">MEDIA</a></div>
<div class="nav1"><a href="http://www.google.com/">CONTACT</a></div>
</div>
试试 position:fixed。非常适合在用户屏幕上制作项目 'fixed'。固定元素，通常不会去任何地方:-)
*{
font-family:sans-serif;
box-sizing:border-box
}
.sidebar{
position:fixed;
top:0;
left:0;
height:100vh;
width:150px;
z-index:10;
background:white;
box-shadow: 4px 4px 9px rgba(0,0,0,.12)
}
.sidebar span{
margin: 5%;
display:block;
padding: 50px 0;
text-align:center;
font-size:20px;
transform:rotate(270deg)
}
.main{
margin-left:170px;
overflow-y:auto;
font-size:50px;
line-height:2
}
<div class="sidebar">
<span>Home</span>
<span>About</span>
<span>Contact</span>
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ultrices libero imperdiet auctor. In odio arcu, ultrices a viverra quis, sodales in magna. Proin efficitur nisl in nulla sagittis scelerisque. Nulla facilisi. Aenean bibendum tincidunt fringilla. Morbi finibus mi nec laoreet faucibus. Ut euismod diam non odio vulputate interdum. Nam malesuada orci ut mauris ultrices venenatis.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquet, est non aliquam consequat, est risus lobortis ex, eu rhoncus mauris nibh eget urna. Integer vel dapibus dui, non eleifend lorem. Praesent consectetur quis est quis commodo. Aliquam nec iaculis erat. Duis consequat bibendum enim eu feugiat. Donec vel tellus tortor. Duis ac blandit libero. Proin vitae ex id velit vestibulum vestibulum non vel sapien.
Nullam gravida enim non condimentum auctor. Curabitur tristique massa magna. Nam euismod, nisl non pulvinar congue, arcu arcu aliquet ex, et imperdiet neque ex eu sapien. In ultricies vestibulum erat, eget vehicula tortor pulvinar at. Sed ut ex et augue condimentum mattis. Aliquam ut libero in sem bibendum semper. Proin eu volutpat mauris.
Mauris finibus gravida elit, nec viverra odio. Curabitur enim diam, elementum vel risus id, maximus semper lorem. Praesent fermentum egestas ex id porttitor. Etiam sodales molestie odio, eget consequat eros laoreet ut. Praesent ut interdum erat, non commodo nunc. Vestibulum ligula orci, fermentum eget ipsum sit amet, dapibus dignissim sapien. Maecenas imperdiet dapibus ante, at hendrerit nisi maximus vitae. Aliquam erat volutpat. Sed iaculis facilisis porta. Aliquam erat volutpat.
Praesent maximus urna elit, tempus facilisis risus accumsan fermentum. Nullam vitae erat placerat, ullamcorper nunc id, luctus ex. Donec gravida, mauris sed finibus iaculis, velit purus placerat risus, quis mattis felis metus vitae lorem. Vestibulum aliquet ut leo sed commodo. In ac neque efficitur, placerat ante ut, tincidunt massa. Etiam eu fringilla elit. Duis quis dignissim ex, et facilisis mauris. Integer euismod nulla sed libero ornare, in vehicula justo lobortis. Quisque at lectus interdum, blandit diam ut, mollis libero. Quisque congue fringilla orci, at efficitur erat aliquam sagittis. Phasellus congue urna eget nibh eleifend interdum. Vivamus rutrum odio eu dolor ultrices dictum. Morbi ut velit nec eros malesuada semper. Quisque eu fringilla nisi, eu sodales ligula. Nullam id dolor auctor, pretium velit id, molestie ligula. Cras eget lorem pretium, tincidunt ex id, dapibus massa.
</div>
难点在于使其响应迅速。您可以在移动设备上将其固定显示在顶部，也许吗？
@media(max-width:736px){
.sidebar{
position:fixed;
top:0;
left:0;
height:100px;
width:100%;
z-index:10;
background:white;
box-shadow: 4px 4px 9px rgba(0,0,0,.12);
}
.main{
margin-top:130px;
}
}
这里你必须使用 css 的位置 属性，并将位置设为粘性并在左侧栏上使用该样式。