Question

关于滚动条和侧边菜单需要一些想法吗？

<body style=" margin: 0px; ">
    <div style="position: absolute; width: 200px; height: 2000px; background: red;"></div>
    <div style="width: 100%;height: 3000px;background: blue;"></div>
</body>

https://jsfiddle.net/ergjbvz5/

元素div红色是侧面菜单和元素div蓝色主要网站区域。

当用户滚动页面直到元素div红色结束并且用户仍然滚动页面时。如何处理固定元素div红色并仅滚动元素div蓝色？

Answer 1

它可以帮到你，试试这个：

＆＃13;

<body style=" margin: 0px; ">
    <div style="position: fixed; width: 30%; height: 100%; background: red;">Test sidebar</div>
    <div style="margin-left:30%;height: 3000px;background: blue;">
      Test body
    </div>
</body>

＆＃13;

Answer 2

@Robert Down你只需要改变红色div的“位置”。

<body style=" margin: 0px; ">
    <div style="position: fixed; width: 200px; height: 2000px; background: red;">grghrughrughr<br>
    grghrughrughr<br>grghrughrughr<br>grghrughrughr<br>grghrughrughr<br>
    rrghrig</div>
    <div style="width: 100%;height: 3000px;background: blue;"></div>
</body>

Answer 3

这样的事情：

＆＃13;

<body style=" margin: 0px; ">
    <div style="position: fixed; width: 200px; height: 100%; overflow:auto;">
      <div style="position: absolute; width: 100%; height: 2000px; background: red;"></div>
    </div>
  <div style="width: 100%;height: 3000px;background: blue;"></div>
</body>

＆＃13;

关于滚动条和侧边菜单需要一些想法吗？

3 个答案: