Javascript Html侧边栏'；它是粘性的，仅限于div_Javascript_Html_Css

Javascript Html侧边栏'；它是粘性的，仅限于div

javascript html css

Javascript Html侧边栏'；它是粘性的，仅限于div,javascript,html,css,Javascript,Html,Css,我正在尝试制作一个HTML侧边栏，它限制在divs大小（不像常规侧边栏那样全屏显示），并且它也是粘性的，因此当divs高度超过屏幕高度时，侧边栏会粘在屏幕上，不会滚动到目前为止，我做了第一部分。侧边栏仅限于它所包含的div的高度 HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </h

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

到目前为止，我做了第一部分。侧边栏仅限于它所包含的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>

JS-侧边栏的打开和关闭

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

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

JS小提琴-

我的目标是将其与以下内容结合起来：

有没有办法将边栏同时限制为div和sticky？

只需将

位置：绝对

替换为

位置：固定

只需将

位置：绝对

替换为

位置：固定

重要的是要知道，要使div保持粘性，必须定义一个高度。如果我正确理解了您想要做的事情，那么您以前代码中的问题是您将sticky div放在侧边栏中，然后将高度指定给侧边栏

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

在这个解决方案中，我将

display:flex

添加到主div（

.filtering

）中，并将文本内容包装到另一个div（

.main content

）中。现在你的侧边栏只在主div内有粘性。但是你也必须知道，因为你在文本内容附近放置了打开和关闭div的按钮，我认为你不希望它有粘性

以下是解决方案：（和）

函数openNav（）{ document.getElementById（“mySidenav”）.style.width=“250px”； } 函数closeNav（）{ document.getElementById（“mySidenav”）.style.width=“0”； }

正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
高度：100vh；
宽度：0；
z指数：2；
宽度：250px；
位置：粘性；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav#filterheader{
排名：0；
右：25px；
字体大小：36px；
左边距：30px；
边缘顶部：32px；
文本对齐：左对齐；
颜色：白色；
}
p{
字体大小：50px；
}
.过滤{
显示器：flex；
柔性包装：包装；
弯曲方向：行；
}
.主要内容{
弹性：1；
}
#副滤头{
颜色：白色；
字号：21px；
边缘顶部：30px；
左边距：40px；
}
#过滤列表{
左边距：15px；
颜色：白色；
}
.结束{
位置：绝对位置；
右：0px；
宽度：32px；
高度：32px；
不透明度：0.3；
}
.关闭：悬停{
不透明度：1；
}
.close:之前，.close:之后{
位置：绝对位置；
左：15px；
内容：''；
高度：33像素；
宽度：2倍；
背景色：#ffffff；
}
.结束：之前{
变换：旋转（45度）；
}
.结束：之后{
变换：旋转（-45度）；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav a{字体大小：18px；}
}


顶部文本
滤器
平台


蒸汽


史诗


起源


高格


☰ 打开
知识是一种美德，是一种美德，是一种美德，是一种美德。这是我的梦想。小猫咪
知识是一种美德，是一种美德，是一种美德，是一种美德。这是我的梦想。小猫咪
底部文本