如何制作静态侧边栏，当向下滚动页面时该侧边栏不会移动
[英]How to make a static sidebar, which doesn't move when page is scrolled down
问题描述
I want to make a website that has the following layout: 
我要制作一个具有以下布局的网站：
I want to make the sidebar (F/T container) a social network link. 我想使侧边栏（F / T容器）成为社交网络链接。 I want that div to be sticking to the right side, even if the viewer scrolls down the page, so that he/she can access Facebook/Twitter all the time. 我希望该div保持在右侧，即使查看者向下滚动页面也是如此，以便他/她可以一直访问Facebook / Twitter。 How can I achieve this with pure CSS(external sheet of course) and HTML (no Javascript). 如何使用纯CSS（当然是外部表格）和HTML（没有Javascript）来实现这一点。 I am particularly asking which div should I put the sidebar in. Then, I guess I should use a position:static property in CSS. 我特别在问应该将侧边栏放入哪个div。然后，我猜我应该在CSS中使用position:static属性。
If Javascript is required, could somebody send me a link to an already made function (I don't know how to work with this language)? 如果需要Javascript，有人可以给我发送一个指向已经建立的函数的链接（我不知道如何使用这种语言）？ Here's my HTML code by now (I think I can handle the CSS part): 到目前为止，这是我的HTML代码（我认为我可以处理CSS部分）：
<html>
<head>
<style></style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="nav">
</div>
</header>
<div id="intro">
</div>
<div id="content">//important content here (visible only when scrolled down)
</div>
<div id="footer"></div>
</body>
</html>
There is already a similar problem but only with one div-I have two. 已经存在类似的问题，但只有一个div，我只有两个。 Thank you in advance! 先感谢您！
2 个解决方案
解决方案1
1 已采纳 2018-08-09 10:04:26
https://codepen.io/anon/pen/ZjmwWy?editors=1100#0 https://codepen.io/anon/pen/ZjmwWy?editors=1100#0
HTML 的HTML
.container { position: relative; } .page-contents { line-height: 30px; } .social-actions { background: #777; color: #000; width: 150px; height:70px; position: fixed; top: 100px; left: 0; z-index: 10; }
<div class="container"> <div class="page-contents"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nisi enim. Cras eu aliquet ante. Duis et urna efficitur, condimentum urna auctor, interdum arcu. Sed in enim eu enim congue vehicula. Aenean eget ligula eu mi vehicula suscipit vel vitae mi. Integer a nisl feugiat, faucibus lectus sed, elementum orci. Nullam quam magna, euismod at lorem a, gravida imperdiet dui. Vestibulum id tellus lorem.</p> <p>Vestibulum orci tortor, malesuada sit amet hendrerit vel, maximus vitae elit. Quisque sed dapibus arcu. Quisque eget venenatis libero, sit amet interdum turpis. Mauris risus odio, scelerisque eu molestie in, venenatis vel ante. Proin et diam leo. Curabitur gravida, turpis a consectetur porta, ipsum nibh lobortis arcu, non maximus justo nibh vel sem. Cras faucibus, quam quis tempor interdum, elit lacus dapibus nisi, eleifend pretium lacus lorem sit amet libero. Ut interdum neque nisi, a scelerisque purus porttitor eget. Nulla pretium aliquam commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla mattis id arcu ut porta.</p> <p>Maecenas vitae mi consequat, scelerisque massa interdum, posuere tortor. Nam blandit ultricies nisl, viverra tincidunt lectus semper ac. Phasellus porta augue tortor, vel venenatis sapien aliquet congue. Sed luctus consequat arcu at venenatis. Morbi accumsan ligula ultricies elit vulputate, et molestie sem interdum. Etiam congue aliquam augue, eu efficitur felis. Vestibulum pellentesque tellus tellus, at venenatis ligula finibus id. Quisque id accumsan nibh.</p> <p>In at purus erat. Etiam vitae purus vel orci ultrices congue. Aliquam porta at lectus ultrices volutpat. Vivamus scelerisque vel risus a aliquam. Duis est augue, iaculis quis interdum eget, tempor accumsan quam. Vivamus vel lobortis augue, eu convallis lectus. Nam venenatis scelerisque maximus. Vivamus lobortis semper pharetra. Cras nisi dui, placerat congue nulla sed, suscipit dictum dui. Integer tristique quis ligula at dignissim. Vivamus pulvinar finibus tortor, vulputate placerat ante luctus ut. Nulla id euismod libero. Fusce in nunc tellus. Aliquam mattis sagittis tortor, id varius ex sodales eu. In mollis ultrices arcu vel consequat.</p> <p>Cras faucibus sem vitae erat fermentum tincidunt. Aenean id eleifend tellus. Fusce id scelerisque erat. Fusce pulvinar egestas sapien, et fermentum massa accumsan ultricies. Nullam laoreet, metus id hendrerit scelerisque, enim dui cursus nisi, in accumsan nibh erat vel dui. Sed aliquam hendrerit libero, vel laoreet urna tincidunt eget. Donec scelerisque quam ut fringilla blandit. Aenean lobortis commodo dui a eleifend. Etiam sed scelerisque purus.</p> </div> <div class="social-actions"> <a href="fb.com">Facebook</a> </div> </div>
解决方案2
1 2018-08-09 10:13:44
This might help you.. using position:fixed; 这可能会帮助您..使用position:fixed; will fix your problem 将解决您的问题
Also a fiddle: http://jsfiddle.net/zv5fh0yk/ 也是一个小提琴： http : //jsfiddle.net/zv5fh0yk/
#container { max-width: 1000px; width:100%; margin-left: auto; margin-right: auto; position: relative; padding:0; } #header { float: left; z-index: 20; width: 100px; padding-top: 20px; } #header .inner { position: fixed; width:10%; } .inner li{list-style:none;} #maincontent { width: 80%; float:right; padding-left:5%; }
<div id="container"> <header id="header"> <div class="inner"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> <li>Login</li> </ul> </div> </header> <div id="maincontent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
打开链接时如何使页面向下滚动 - How to make a page scrolled down when a link is opened
如何使页面加载向下滚动到 <div> 什么时候装的？ - How to make the page load scrolled down to <div> when loaded?
如何上下移动侧边栏？ - How to move sidebar on page up or down pressed?
滚动页面时如何移动 HTML 元素？ - How to move HTML elements when a page is scrolled?
React 如何使页面允许向下滚动？ - React How do I make the page allows scrolled down?
仅当页面向下滚动时，如何加载页面上的项目？ - How to load items on page only when page is scrolled down?
如何在JQuery时间倒计时中设置固定时间（这不影响页面刷新时间）？ - How to set a fixed time in JQuery time count down (which doesn't affect when page refreshes)?
滚动页面时如何更快地移动1格/在格上移动 - How to move 1 div faster/over a div when the page is scrolled
滚动页面时调整窗口大小时如何使此效果起作用 - How to make this effect work if the window is resized when page is scrolled
滚动页面时如何使第二个div动画 - How to make second div animate when page is scrolled
相关标签