固定的侧边栏带有响应式垂直文本

Question

我想知道如何固定我的左侧边栏位置，同时保持垂直文本按钮（ABOUT，GALLERY，CONTACT）对窗口高度的响应。

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> 

Answer 1

您可以通过将nav包装在具有position:fixed的div中来轻松实现此目的。 我修改了您的代码，相信可以达到您期望的结果。

有关CSS的position属性的更多信息，请访问此网页 。

 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> 

Answer 2

给出position: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;
    }
}

Answer 3

在这里，您必须使用css的position属性，并使位置变粘，并在左侧栏上使用该样式。