Question

我要制作一个具有以下布局的网站：

我想使侧边栏（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，我有两个。预先谢谢你！

Answer 1

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>

Answer 2

这可能会对您有所帮助。使用position:fixed;可以解决您的问题

还有个小提琴：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>

如何制作静态的侧边栏，当向下滚动页面时该侧边栏不会移动

2 个答案: