我想制作一个具有以下布局的网站:
我想让侧边栏(F/T 容器)成为社交网络链接。我希望那个 div 坚持在右侧，即使观众向下滚动页面，这样他/她就可以一直访问 Facebook/Twitter。我怎样才能用纯 CSS(当然是外部工作表)和 HTML(没有 Javascript)来实现这一点。我特别想问我应该把侧边栏放在哪个 div 中。然后，我想我应该在 CSS 中使用 position:static 属性。
如果需要 Javascript，有人可以向我发送指向已创建函数的链接吗(我不知道如何使用这种语言)？ 现在这是我的 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>
已经有类似的问题，但只有一个 div - 我有两个。 提前致谢!
最佳答案
https://codepen.io/anon/pen/ZjmwWy?editors=1100#0
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>
关于javascript - 如何制作一个静态侧边栏，当页面向下滚动时它不会移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51763823/