javascript - 位置粘性不占用空间

标签 javascript html css

我的目标是制作一个固定的侧边栏但仅限于某个div。你可能知道，CSS中的position: Sticky属性在position:relative和postition:fixed之间切换。这个问题(据我所知)是， position:relative 不能用于使元素 float 在其他元素上，因此它会在网站中留下空白空间。

我的代码:
HTML:

<!--Top text-->
<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 class="container">
<!--Sidebar-->
     <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>
     <!--Middle text-->
     <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 egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetipsum 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 egetLorem 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 egetLorem 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>

<!--Bottom text-->
<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>


CSS:

.container{
  position: relative;
}


.sidenav {
    height: 100vh;
    width: 0;
    z-index: 1000;
    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;
  }


  #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;}
  }


JS:(侧边栏的打开和关闭)

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

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

JS fiddle :https://jsfiddle.net/ru2q7ydj/
正如您在这里所看到的，侧边栏正在按其应有的方式工作 - 它是固定的，同时仅限于 div container。然而，由于侧边栏的 relative 属性，页面中存在空白区域。如果我们将粘性属性更改为绝对 - https://jsfiddle.net/ru2q7ydj/1/空间消失了(当然粘性功能也消失了)
有没有办法在保留这些功能的同时摆脱该空间？

最佳答案

这是一个解决方案，我在容器上添加了 display: grid 并将打开按钮移到了 div.main-content 内。

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

  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }
.container {
  position: relative;
  
  /* new lines */
  display: grid;
  grid-template-columns: 0 1fr;
}

.sidenav {
  height: 100vh;
  width: 0;
  z-index: 1000;
  margin-right: 0;
  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;
}


#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;
  }
}
<!--Top text-->
<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 class="container">
  <!--Sidebar-->
  <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>
  <!--Middle text-->
  <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> -->
  <div class="main-content">

    <!-- new line --> <p>
      <!-- new line --> <span style="font-size:30px; cursor:pointer;" onclick="openNav()">&#9776; open</span>
      <!-- new line --> </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 egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetdipiscing tristique risus. Nullam eget felis egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetLorem 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 egetdipiscing tristique risus. Nullam eget felis egetLorem 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 egetLorem 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 egetLorem 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>

<!--Bottom text-->
<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>

关于javascript - 位置粘性不占用空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61442138/

上一篇：vue.js - 如何使用parcel.js和bootstrap-vue修复 "Multiple instances of Vue detected!"

下一篇：c# - 小金额处理的整数与小数

相关文章：

html - CSS 导航栏不是水平的并且颜色错误

javascript - CSS3 中的页面 curl (翻转)

javascript - "autoCapitalize"不是有效的样式属性 - React Native 中的错误

html - 默认的 joomla 表单样式

javascript - 清除动态添加/删除输入的输入值

javascript - React 子组件中父 html 元素的引用

javascript - 什么会导出 JavaScript/Node.JS 文件？

javascript - Selectboxit - 如何刷新 selectboxit 中的选定值

php - 在网页上格式化打印请求？

javascript - 从 node.js 服务器加载脚本的正确 src= 属性是什么

©2024 IT工具网  联系我们