时间戳

首页 > 解决方案 > 具有粘性且仅限于 div 的 Html 侧边栏

javascript - 具有粘性且仅限于 div 的 Html 侧边栏

问题描述

我正在尝试制作一个仅限于 div 大小的 HTML 侧边栏（不像常规侧边栏那样全屏），并且它也是粘性的，因此当 div 高度超过屏幕高度时，侧边栏会粘在屏幕上并且不会滚动。

到目前为止，我制作了第一部分。侧边栏仅限于它所在的 div 的高度。

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Top text</h2>
<div class="filtering">

  <div id="mySidenav" class="sidenav">
    <div id="sticky">
    <a href="javascript:void(0)" onclick="closeNav()" class="close" id="closefilter"></a>
    <div id="filterheader">Filter</div>
    <div id="filtercontent">
      <div id="subfilterheader">Platforms</div>
      <ul style="list-style: none;" id="filterlist">
        <li>
          <div class="checkbox">
            <label><input id="filtersteam" type="checkbox" onchange="changeFilter('steam')"/>Steam</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input id="filterepic" type="checkbox" onchange="changeFilter('epic')"/>Epic</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input id="filterorigin" type="checkbox" rel="origin" onchange="changeFilter('origin')"/>Origin</label>
          </div>
        </li>
        <li>
          <div class="checkbox">
            <label><input id="filtergog" type="checkbox" rel="gog" onchange="changeFilter('gog')"/>GOG</label>
          </div>
        </li>
      </ul>
      </div>
    </div>
  </div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed adipiscing diam donec adipiscing tristique risus. Nullam eget felis eget </p>
</div>
<h1>Bottom text</h1>
</body>
</html>

CSS

body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  position: absolute;
}

.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 #filterheader {
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 30px;
  margin-top: 32px;
  text-align: left;
  color: white;
}

p{
  font-size: 50px;
}

.filtering{
  position: relative;
}


#subfilterheader{
  color: white;
  font-size: 21px;
  margin-top: 30px;
  margin-left: 40px;
}

#filterlist{
  margin-left: 15px;
  color: white;
}

#sticky{
  position: sticky;
  position: -webkit-sticky;
  top: 30px;
}


.close {
  position: absolute;
  right: 0px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #ffffff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

@media screen and (max-height: 450px) {
  .sidenav a {font-size: 18px;}
}

JS - 侧边栏的打开和关闭

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

JS fiddle - https://jsfiddle.net/4a31mgw0/

我的目标是将它与这样的东西结合起来：https://jsfiddle.net/yn5rv0ke/
有没有办法让侧边栏既限于 div 又是粘性的？

标签： javascripthtmlcss

解决方案

重要的是要知道要使 div 具有粘性，它必须定义一个高度。如果我正确理解您想要做什么，那么您之前代码中的问题是您将粘性 div 放在侧边栏内，然后将高度分配给侧边栏。

此外，使用单独的 div 更容易，即侧边栏 div 和内容 div。

在这个解决方案中，我将 div 添加display: flex到主 div ( .filtering) 并将您的文本内容包装在另一个 div ( .main-content) 中。现在您的侧边栏仅在主 div 内具有粘性。但是，您还必须知道，因为您将打开和关闭 div 的按钮放在文本内容附近，我认为您不希望它具有粘性。

这是解决方案：（和小提琴）

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100vh;
  width: 0;
  z-index: 2;
  width: 250px;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
}

.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 #filterheader {
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 30px;
  margin-top: 32px;
  text-align: left;
  color: white;
}

p{
  font-size: 50px;
}

.filtering{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.main-content {
  flex: 1;
}

#subfilterheader{
  color: white;
  font-size: 21px;
  margin-top: 30px;
  margin-left: 40px;
}

#filterlist{
  margin-left: 15px;
  color: white;
}


.close {
  position: absolute;
  right: 0px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #ffffff;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}

@media screen and (max-height: 450px) {
  .sidenav a {font-size: 18px;}
}
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <h2>Top text</h2>
    <div class="filtering">

      <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" onclick="closeNav()" class="close" id="closefilter"></a>
        <div id="filterheader">Filter</div>
        <div id="filtercontent">
          <div id="subfilterheader">Platforms</div>
          <ul style="list-style: none;" id="filterlist">
            <li>
              <div class="checkbox">
                <label><input id="filtersteam" type="checkbox" onchange="changeFilter('steam')" />Steam</label>
              </div>
            </li>
            <li>
              <div class="checkbox">
                <label><input id="filterepic" type="checkbox" onchange="changeFilter('epic')" />Epic</label>
              </div>
            </li>
            <li>
              <div class="checkbox">
                <label><input id="filterorigin" type="checkbox" rel="origin" onchange="changeFilter('origin')" />Origin</label>
              </div>
            </li>
            <li>
              <div class="checkbox">
                <label><input id="filtergog" type="checkbox" rel="gog" onchange="changeFilter('gog')" />GOG</label>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
      <div class="main-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed adipiscing diam donec adipiscing tristique risus. Nullam eget felis eget </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed adipiscing diam donec adipiscing tristique risus. Nullam eget felis eget </p>
      </div>
    </div>
    <h1>Bottom text</h1>
  </body>

</html>

推荐阅读