javascript - 滚动主要内容 Div 时可滚动的侧边栏

标签 javascript jquery html css

我想在 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%;
}

最佳答案

如果我对您的问题的理解正确,您希望侧边栏在您向下滚动页面时滚动。不幸的是,我认为仅使用 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>

关于javascript - 滚动主要内容 Div 时可滚动的侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28036393/

相关文章:

javascript - Regexp Javascript 多个匹配和多个分隔符

javascript - 如何在数据更新时更新在 dimple.js 堆叠条形图中添加的文本

jquery - Scrollable Div,可以看到哪些元素

javascript - Ajax 动态选择表单未提交值

html - 自动包含设置了上/左/右/下值的相对定位元素

javascript - Gatsby Remark 画廊、视频、制作人员名单等的边车文件?

javascript - npm install 类名在我的 li 标签中不起作用

jquery - 通过jquery获取浏览器名称

html - SEO 对响应式网站指定图像宽度和高度的影响?

html - 什么是在文本框 ex :searchbox 上设置背景图像样式的最佳方式