时间戳

首页 > 解决方案 > 如何使用 JavaScript 修复侧边栏错误

javascript - 如何使用 JavaScript 修复侧边栏错误

问题描述

function sidebarSticky() {
  let sidebar = document.getElementById("sidebar"),
    sidebarHeight = sidebar.offsetTop + sidebar.clientHeight;

  function process() {
    let windowHeight = document.documentElement.scrollTop + window.innerHeight;
    if (windowHeight > sidebarHeight) {
      sidebar.className = "sticky";
    } else if (windowHeight < sidebarHeight) {
      sidebar.className = "";
    }
  }

  //WithOut Scrolling...
  process();

  //With Scrolling...
  window.addEventListener('scroll', function(){
    process();
  })
  
}


sidebarSticky();
*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin: 0;
}

nav{
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  background-color: #000;
  z-index: 100;
}

#sidebar{
  min-height: 100%;
  width: 160px;
  background-color: #ddd;
  position: absolute;
  left: 0;
}


.sticky{
  position: fixed !important;
  bottom: 0 !important;
}
<nav> </nav>
<div style="height: 80px;"></div>

<!-- Sidebar -->
<div id="sidebar">
  <span> Start </span>
   <span style="position: absolute; top: 50%;"> Middle  </span>
  <span style="position: absolute; bottom: 0;"> End </span>
</div>
<!-- Sidebar -->

<content style="display: block;margin: 20px 20px 20px 180px;">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, earum.
  <hr>
  <h1> 
	distinctio facilis quisquam officia tenetur veniam quasi. Fugiat placeat, repellat iusto totam illum tenetur odio doloribus, fugit omnis incidunt quae repudiandae, quia quaerat perferendis! Minima laboriosam vero reprehenderit officia. Dolor rerum eligendi nemo ad quasi quisquam veniam aliquid commodi enim rem, consequuntur quos sequi veritatis nobis amet? Ab quis voluptas corrupti. Excepturi voluptatibus aut dignissimos perspiciatis culpa eaque repellat laborum illum, et vel saepe architecto temporibus inventore, corrupti laudantium quae? Sequi, dolorem? nostrum in odio quos mollitia dolores quas consectetur doloremque perferendis saepe quibusdam eaque totam vitae pariatur incidunt quaerat, vero exercitationem tenetur, sunt architecto ex voluptatem. Iure voluptas quae et. Ducimus, pariatur cumque itaque nihil neque blanditiis deleniti ullam consectetur quo, cum ipsam tempora exercitationem saepe accusamus. Officia ex voluptatum veri
  </h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sunt, fuga minima iure temporibus consequuntur blanditiis laboriosam architecto accusamus hic inventore, harum nisi dignissimos corrupti ad quae culpa asperiores ut. Necessitatibus et, magnam fugiat atque odio ad dolor quo minima in porro sint debitis tempora quasi, beatae accusamus distinctio repellat voluptas? Porro ratione nt accusamus quam odit laudantium a excepturi impedit, eaque voluptates dicta , sint illum recusandae quisquam laborum! Architecto fugit debitis similique suscipit amet saepe aut id ipsum beatae nam quas possimus sint autem atque quod aperiam earum, distinctio facilis quisquam officia tenetur veniam quasi. Fugiat placeat, repellat iusto totam illum tenetur odio doloribus, fugit omnis incidunt quae repudiandae, quia quaerat perferendis! Minima laboriosam vero reprehenderit officia. Dolor rerum eligendi nemo ad quasi quisquam veniam aliquid commodi enim rem, consequuntur quos sequi veritatis nobis amet? Ab quis voluptas corrupti. Excepturi voluptatibus aut dignissimos perspiciatis culpa eaque repellat illum, et vel saepe architecto temporibus inventore, corrupti laudantium quae? Sequi, dolorem? Cupiditate nostrum in odio quos mollitia dolores quas consectetur doloremque perferendis saepe quibusdam eaque totam vitae pariatur incidunt quaerat, vero exercitationem tenetur, sunt architecto ex voluptatem. Iure voluptas quae et. Ducimus, pariatur cumque itaque nihil neque blanditiis deleniti ullam consectetur quo, cum ipsam tempora exercitationem saepe accusamus. Officia quibusdam ex voluptatum veritatis possimus minus deleniti, aliquid facere quia? Amet odio recusandae soluta est esse expedita. Nemo at, voluptate impedit praesentium a doloremque architecto doloribus. Est eum enim veniam nobis rerum, corrupti accusantium et libero itaque inventore tenetur hic obcaecati voluptas sint id eligendi consequatur incidunt quaerat a asperiores laborum blanditiis tempora autem. Rem, non cupiditate. Eligendi non eaque laborum, sapiente praesentium iusto dicta atque consequatur ratione error fugiat. Voluptas eaque explicabo dolorum molestias, ad consectetur animi odio. Deserunt cum velit rerum corporis aliquid. Vitae, et exercitationem consequuntur debitis nobis a esse assumenda. Ex id reprehenderit sint vero debitis, temporibus sed aperiam saepe error mollitia vel iure, adipisci ipsam perspiciatis. Blanditiis libero minima mollitia enim voluptatibus tenetur voluptas. Labore voluptatum ratione unde esse ad voluptates deserunt reiciendis delectus! Quaerat eos, unde officia facere adipisci expedita alias? Ratione sapiente, facere, nemo, fuga repellendus obcaecati saepe consequuntur eos consectetur natus ipsa? Eaque vitae aspernatur ipsum? Cum, numquam fugiat ullam ipsum nemo quibusdam, error eius asperiores nostrum id laudantium veniam enim voluptatem, vero cumque esse tempore atque quae animi. Aliquam reprehenderit ullam repudiandae accusamus aut molestiae placeat odit?
</content>

一切通常都很好，但是当我调整窗口/打开 inspact elm 的大小时，它会像这样在滚动时破坏侧边栏，第二个问题是这样的。图片图片



当我调整窗口大小时，这两个问题都会产生。第一个问题是在调整窗口大小后，它没有完美地添加粘性类（看起来像故障），第二个问题是当我在顶部时，粘性类不会删除。我也试试这段代码：

window.onresize = function (event) {
   process();
   //failed again :(
};

标签： javascripthtmlcss

解决方案

试试下面的示例代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

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

<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
   
</body>
</html>

推荐阅读