Нижний колонтитул липкий, пока я не разверну свой аккордеон (html, css, vanilla js)

В основном мой липкий нижний колонтитул обычно находится внизу страницы, работает совершенно нормально. Однако на странице с позицией аккордеона: абсолютная, нижняя: 0, похоже, не работает после расширения аккордеона. Несколько лет назад видел похожие сообщения по этой проблеме, но решения не публиковались. Заранее извиняюсь, я новичок!

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

    .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 2%;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
      }
      
      .active, .collapsible:hover {
        background-color: #555;
      }
      
#footerContainer{
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
}

 <div class= "projectsContainer" id= "projectsContainer">

        <button type = "button" class = "collapsible">Front End</button>
        
        <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
        
        <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
        </div>
        </div>
      
        <button type = "button" class = "collapsible">Back End</button>
      
        <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
         <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
        </div>
        </div>
        
                <button type = "button" class = "collapsible">Full Stack</button>
      
        <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
         <div class = "content">
          <div class = "Project">
          <h1 class = "projectsTitle">Project</h1>
        </div>
        </div>
</div>
        

                 
                 
                 <footer id = "footerContainer">
                    <button id = "githubBtn"><img class= "socials"</button> 
                    <button id = "linkedinBtn"><img class= "socials"</button> 
                    <button id = "instagramBtn"><img class= "socials"</button> 
                  
                  </footer>

Но ваш нижний колонтитул не липкий? Он позиционируется абсолютно, не используя липкое. Если вы измените его на position: sticky;, он останется внизу независимо от того, открыты или закрыты аккордеоны. Кроме того, вам нужно закрыть теги изображений перед закрывающими тегами кнопки ></button> См.: developer.mozilla.org/en-US/docs/Web/CSS/position

— 13.05.2022 19:28

блин жаль, что я не мог отредактировать сообщение. Пытался отредактировать код, чтобы он был не таким длинным, и пропустил >! Хорошо, круто, поэтому я думаю, что тогда я неправильно понял концепцию липкого, думая, что это термин, тесто! Однако, когда я делаю position:sticky, он все еще не прилипает ко дну, а вместо этого перемещается вместе с кодом!

— 13.05.2022 19:39

Вместо этого вы можете использовать fixed, что заставит нижний колонтитул оставаться внизу, несмотря ни на что. Sticky делает то, что подразумевает, он прилипает к прокрутке, а фиксированный означает, что он прибит туда, куда вы скажете. В статье, на которую я ссылаюсь, есть более элегантное объяснение, чем это, но в основном это суть.

— 13.05.2022 19:43

С фиксированным он остается внизу, но прокручивается аккордеоном, что очень раздражает. Если я найду способ остановить это с помощью position:fixed, мы готовим на газу!! Спасибо, я ценю, что я проверю это.

— 13.05.2022 19:49

Взгляните на мой ответ и дайте мне знать, что вы думаете, и мы можем обсудить это оттуда, но вы смотрите на атрибуты и ищете смешанные результаты. Я могу доставить вас туда, куда вы хотите, мне просто нужно знать желаемый конечный результат :)

— 13.05.2022 19:58

javascript html css accordion sticky-footer

13.05.2022 19:18

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете вложить свой нижний колонтитул в общий контейнер, если хотите сохранить поток с аккордеонами, а затем использовать либо position: fixed, либо position: sticky в зависимости от вашего намерения. Дайте мне знать, как это работает для вас.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {

  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 2%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


.content {
  display: none;
}

.active,
.collapsible:hover {
  background-color: #555;
}

#footerContainer {
  position: aboslute;
  width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class = "projectsContainer" id = "projectsContainer">

  <button type = "button" class = "collapsible">Front End</button>

  <div class = "content">
    <div class = "Project">
      <h1 class = "projectsTitle">Project</h1>
    </div>

      <div class = "Project">
        <h1 class = "projectsTitle">Project</h1>
      </div>
    </div>

  <button type = "button" class = "collapsible">Back End</button>

  <div class = "content">
    <div class = "Project">
      <h1 class = "projectsTitle">Project</h1>
    </div>
      <div class = "Project">
        <h1 class = "projectsTitle">Project</h1>
      </div>
    </div>

  <button type = "button" class = "collapsible">Full Stack</button>

  <div class = "content">
    <div class = "Project">
      <h1 class = "projectsTitle">Project</h1>
    </div>
      <div class = "Project">
        <h1 class = "projectsTitle">Project</h1>
      </div>
    </div>
                   
                 <footer id = "footerContainer">
                    <button id = "githubBtn"><img class= "socials"></button> 
                    <button id = "linkedinBtn"><img class= "socials"></button> 
                    <button id = "instagramBtn"><img class= "socials"></button> 
                  
                  </footer>
  </div>

хорошая легенда!!! Выглядит намного лучше. Следующая задача для меня — попытаться выяснить, как закрыть мой аккордеон!

— 13.05.2022 20:23

Смотрите обновление, все, что вам нужно сделать, это сначала объявить класс контента display: none, а затем ваш JS отобразит его при нажатии. Вам также нужно будет выполнить повторную вложенность для ваших проектов, потому что вам не нужен контент div несколько раз для этого.

— 13.05.2022 20:29

потрясающий дисплей: никто не добился цели. Ты мой любимый человек сегодня ха-ха

— 13.05.2022 20:39

Не беспокойтесь, если это ответило на ваш вопрос, отметьте галочкой рядом с ответом и дайте мне знать, если вам нужна дополнительная помощь :)

— 13.05.2022 20:41

13.05.2022 19:57