Позиция липкая, которая не занимает места - PullRequest
Новая
       0

Позиция липкая, которая не занимает места

1 голос
/ 26 апреля 2020

Моя цель - создать боковую панель, которая будет работать как фиксированная , но ограничена определенным div . Как вы, возможно, знаете, атрибут position: sticky в css переключается между position: relative и postition: fixed. Проблема с этим (насколько я знаю) заключается в том, что position: relative нельзя использовать, чтобы элемент плавал над другими элементами, поэтому он оставляет пустое место на веб-сайте.

Мой код:
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/, пространство исчезнет (но, конечно, также и липкая функциональность)
Есть ли способ избавиться от этого пространства при сохранении эти функции?

Ответы [ 2 ]

1 голос
/ 26 апреля 2020

Вот решение, в котором я добавил 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>
0 голосов
/ 26 апреля 2020

Если вы добавите контейнер к нему с position: absolute, он будет работать 

.abs {
  position: absolute;
}

.sidenav {
    height: 100vh;
    z-index: 1000;
    width: 250px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
  }


<div class='abs'>

     <div id="mySidenav" class="sidenav">
</div>
</div>

https://jsfiddle.net/5d7xs2h3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...