Question

我想创建一个侧栏，类似于Wordpress后端的管理员侧边栏，这意味着当我向下滚动主页面时，如果侧边栏有更多内容，它也会滚动直到它到达其底部内容和停止。向上滚动时会发生相反的情况。我的基本布局如下：

<body>
    <header id="Brand">
        <div id="Content"></div>
    </head>
    <div id="Main"></div>
</body>

我的CSS目前是：

#Brand
{
    bottom: 0;
    left: 0;
    min-width: 300px;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 34%;
}

#Main
{
    float: right;
    width: 63%;
}

Answer 1

如果我正确理解了您的问题，则需要在向下滚动页面时滚动侧栏。不幸的是，我不认为只用CSS就可以做到这一点。如果你使用JavaScript，你可以通过动画到所需的滚动位置来实现这样的效果。

$(window).scroll(function(e) {
  $('#Content').animate({
    scrollTop: $(this).scrollTop()
  }, 0);
});

body {
  position: relative;
  margin: 0;
}
#Content {
  bottom: 0;
  left: 0;
  min-width: 200px;
  overflow-y: scroll;
  position: fixed;
  height: 100%;
  top: 0;
  width: 50px;
  background: red;
}
.inner {
  height: 1000px;
}
#Main {
  width: 63%;
  height: 1000px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="Content">
    <div class="inner">
      <ul>
        <li>Home</li>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
      </ul>
    </div>
  </div>
  <div id="Main"></div>
</body>

Answer 2

8月的答案确实接近我正在寻找的内容并滚动两个div，但没有达到我想要的确切结果。在研究时，我遇到了一些代码，通过一些修改，完全符合我的需要。基本解决方案来自这里（https://stackoverflow.com/a/18953340/3098124 Pawel的回答）。这是修改后的代码和JSFiddle。

HTML

<div id="div1">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium faucibus pulvinar. Praesent elementum viverra pulvinar. Curabitur ut risus non quam volutpat imperdiet. Vivamus hendrerit sed mauris vel faucibus. Ut elementum elementum sapien, in faucibus nunc tincidunt eu. Curabitur in quam tortor. In gravida nisi in quam aliquam blandit.

Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim
</div>

<div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium faucibus pulvinar. Praesent elementum viverra pulvinar. Curabitur ut risus non quam volutpat imperdiet. Vivamus hendrerit sed mauris vel faucibus. Ut elementum elementum sapien, in faucibus nunc tincidunt eu. Curabitur in quam tortor. In gravida nisi in quam aliquam blandit.

Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim diam et lorem. Mauris fringilla sapien vitae ultricies tristique. Nulla imperdiet enim vel purus interdum venenatis. Praesent a tincidunt tortor. Maecenas ullamcorper elit leo, a vehicula libero ornare quis. Quisque in tellus id purus convallis vehicula tincidunt eget augue. Vestibulum fringilla condimentum fringilla. Maecenas congue hendrerit nunc eu maximus. Pellentesque et ullamcorper velit, ut volutpat sem. Vivamus quis tristique metus. In vitae tellus suscipit, dapibus tellus eu, elementum lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Ut sed consectetur purus. Aenean placerat porttitor rutrum. Nam quam elit, mollis non neque vel, cursus sodales tellus. Nulla ac nisi nec quam dictum dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rhoncus rhoncus eros, sed bibendum nisi placerat tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id risus congue, faucibus dui et, hendrerit augue. Fusce eu mauris orci. Maecenas efficitur sit amet neque non lobortis. Vivamus dictum tincidunt condimentum. Proin in lacinia purus, id dictum metus.

Maecenas accumsan quam urna, vel varius purus vestibulum non. Aenean egestas metus at fermentum ultrices. Curabitur ante mi, vulputate eu malesuada sit amet, semper eu arcu. Proin venenatis, neque ut fringilla vestibulum, nulla lorem molestie arcu, ut commodo tellus ipsum sit amet nisi. Maecenas quis faucibus risus, sit amet finibus nulla. In hac habitasse platea dictumst. Pellentesque dui elit, blandit vitae placerat ut, volutpat nec nibh. Proin ultricies pharetra mauris non volutpat.

Etiam varius lacus sed turpis sodales venenatis. Integer ut enim aliquam, sodales nibh vitae, porttitor lacus. Pellentesque eleifend tempus egestas. Maecenas sodales vestibulum lectus non aliquet. Sed pulvinar vulputate justo. Ut condimentum pretium congue. Ut congue mauris enim, eu consequat tellus gravida vulputate. Duis cursus velit est, vel placerat justo tristique eget. Integer sagittis ut ante ut eleifend. Duis in felis quis eros pretium sollicitudin sed ut sapien. Ut porta ipsum lorem, at euismod erat gravida ut. Curabitur molestie massa sed est iaculis accumsan. Fusce consectetur, leo ac gravida sollicitudin, nulla felis vestibulum nibh, quis finibus enim dolor ac nulla. Etiam vel egestas diam. 
</div>

CSS

div {
    overflow: scroll;
    float: left;
    text-align: justify;
}
#div1 {
    height : 300px;
    width: 200px;
}
#div2 {
    height : 600px;
    width: 200px;
    margin-left: 18px;
}

的Javascript

var $divs = $('#div2');
var lastS = 0;
var thisS = 0;
var sync = function(e){
    var other = document.getElementById('div1');
    lastS = thisS;
    thisS = this.scrollTop;
    other.scrollTop += thisS - lastS;
}
$divs.on( 'scroll', sync);

http://jsfiddle.net/admzmdzm/

滚动主要内容Div时可滚动边栏

2 个答案: