html侧栏悬浮代码

link rel="stylesheet" href="css/sidebar.css">
    script src="js/sidebar.js">
    /script>
    

div class="wrapper">
      div class="sidebar">
        ul>
          li>
    a href="#">
    Link 1/a>
    /li>
          li>
    a href="#">
    Link 2/a>
    /li>
          li>
    a href="#">
    Link 3/a>
    /li>
          li>
    a href="#">
    Link 4/a>
    /li>
          li>
    a href="#">
    Link 5/a>
    /li>
        /ul>
      /div>
      div class="main">
        p>
    This is the main content./p>
      /div>
    /div>

.wrapper {
      display: flex;
}
.sidebar {
      height: 100%;
      width: 200px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #f1f1f1;
      overflow-x: hidden;
      padding-top: 20px;
}
.sidebar ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
}
.sidebar li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
}
.sidebar li a:hover {
      background-color: #555;
      color: white;
}
.main {
      margin-left: 200px;
      padding: 0 20px;
}

window.onscroll = function() {
sidebarScroll()}
    ;
    var sidebar = document.querySelector('.sidebar');
function sidebarScroll() {
      if (window.pageYOffset >
 200) {
        sidebar.style.top = "50px";
  }
 else {
        sidebar.style.top = "0";
  }
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！