Липкие заголовки реагируют на проблемы

Question

Я пытаюсь создать липкую боковую панель. Он хорошо работает в разрешениях рабочего стола, но, к сожалению, не работает в адаптивных разрешениях. Кроме того, панель закрепления должна прикрепляться к верху содержимого в мобильных разрешениях, а не в левом, как в разрешениях рабочего стола. Для более подробной информации я прилагаю свои файлы js и css здесь. http://dev.netbramha.in/projects/sticky-header/index.js http://dev.netbramha.in/projects/sticky-header/style.css

Не могли бы вы, ребята, помочь мне?

<header>
  Header
</header>
<main>
  <div class="center">
    <div class="fullwidth">
      Full Width Block
    </div>
    <div class="row">
      <div class="left-sidebar">
        <div class="content">
          Sticky Sidebar
        </div>
      </div>
      <div class="main-content">
        Main Content
      </div>
    </div>
    <div class="fullwidth two">
      Full Width Block
    </div>
  </div>
</main>
<footer>
  Footer
</footer>

Answer 1

для ответа на вопрос вам нужно css media запросы в противном случае вы можете использовать bootstrap (фреймворк CSS), который автоматически реагирует на ваш сайт

@media only screen and (max-width: 600px) {
    .left-sidebar .main-content{
        width: 100%;
    }
}

<header>
    Header
</header>
<main>
    <div class="center">
        <div class="fullwidth">
            Full Width Block
        </div>
        <div class="row">
            <div class="left-sidebar">
                <div class="content">
                    Sticky Sidebar
                </div>
            </div>
            <div class="main-content">
                Main Content
            </div>
        </div>
        <div class="fullwidth two">
            Full Width Block
        </div>
    </div>
</main>
<footer>
    Footer
</footer>

Answer 2

Используйте медиазапрос , как показано ниже. Надеюсь, это поможет.

.row {
  display: flex;
}

.left-sidebar {
  width: 30%;
}

@media only screen and (max-width: 720px) {
  .row {
    flex-wrap: wrap;
  }
  .left-sidebar {
    width: 100%;
  }
}

<header>
  Header
</header>
<main>
  <div class="center">
    <div class="fullwidth">
      Full Width Block
    </div>
    <div class="row">
      <div class="left-sidebar">
        <div class="content">
          Sticky Sidebar
        </div>
      </div>
      <div class="main-content">
        Main Content
      </div>
    </div>
    <div class="fullwidth two">
      Full Width Block
    </div>
  </div>
</main>
<footer>
  Footer
</footer>