侧面导航以滚动移动

Question

我想让侧面导航菜单位于页面的最左侧中央部分，当我向下滚动时，我希望它也能移动（仍然位于最左侧的中间部分）。

This is my code

<div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Homescreen</a>
      <a href="#">Menu</a>
      <a href="#">Doggos</a>
      <a href="#">About</a>
    </div>

    <div id="main">
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Map</span>
    </div>

Answer 1

试试这个。我希望这会对你有所帮助:(这是纯HTML / CSS）： 运行代码段并查看结果：

        body {
            margin: 0;
        }

        #main {
            width: 70%;
            min-height: 1000px;
            float: right;
            background-color: darkblue;
        }
        #sidebar-container {
            height: 100vh;
            float: left;
            width: 30%;
            display: flex;
            align-items: center;
            justify-content: center;
        } #sidebar {
            width: 30%;
            background-color: darkgreen;
            min-height: 100px;
            position: fixed;
            left: 0;
        }

    <div id="main">

    </div>
    <div id="sidebar-container">
        <div id="sidebar">

        </div>
    </div>