Js 代码

<script>
    window.addEventListener('scroll', function() {
      var sidebar = document.querySelector('.sidebar');
      var sidebarTop = sidebar.getBoundingClientRect().top;
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

      if (scrollTop > sidebarTop) {
        sidebar.classList.add('fixed');
      } else {
        sidebar.classList.remove('fixed');
      }
    });
</script> 

Css代码

<style type="text/css">
    .sidebarll {
      position: fixed;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 200px; /* 调整根据你的需要 */
      border: 1px solid #ccc;
      padding: 20px;
      background-color: #f7f7f7;
    }
    .sidebarll.fixed {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
    }
    @media (max-width: 1511px) {
      .sidebarll {
        display: none;
      }
    }

</style>

侧边导航

<div class="sidebarll">
<h4>Table Of Contents</h4>
<ul class="nav list flex-column text-3-5 font-weight-medium mb-5-5">
    <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0"><a class="d-inline-flex align-items-center nav-link text-color-dark text-color-hover-primary py-3 ps-0" data-hash="" data-hash-offset="0" data-hash-offset-lg="110" href="#Smart-Room">Smart Room</a></li>
    <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0"><a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0 active" data-hash="" data-hash-offset="0" data-hash-offset-lg="110" href="#Smart-Kitchen">Smart Kitchen</a></li>
    <li class="nav-item border border-color-grey-1 border-top-0 border-end-0 border-start-0 mb-0"><a class="nav-link text-color-dark text-color-hover-primary py-3 ps-0 active" data-hash="" data-hash-offset="0" data-hash-offset-lg="110" href="#Smart-Bathroom">Smart Bathroom</a></li>
</ul>
</div>