Проблемы с откликом липкого заголовка

Я пытаюсь создать липкую боковую панель. Он отлично работает с разрешениями рабочего стола, но, к сожалению, не работает с адаптивными разрешениями. А также липкая полоса должна располагаться вверху контента в мобильных разрешениях, а не влево, как в разрешениях рабочего стола. Для дополнительных разъяснений я прилагаю сюда свои файлы 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>

Можете ли вы вставить рабочий фрагмент того, что пытаетесь объяснить?

— 05.11.2018 07:41

Вы можете объяснить больше, вставив соответствующие образцы изображений

— 05.11.2018 08:12

javascript css sidebar sticky

05.11.2018 07:21

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 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>

05.11.2018 07:44

для ответа на вопрос вам нужно css медиа-запросы в противном случае вы можете использовать бутстрап (css framework), который автоматически реагирует на ваш веб-сайт.

@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>

05.11.2018 07:56

Другие вопросы по теме

Мой текст div скрывается за изображением героя

Применение динамических стилей с помощью css / scss в vue

Добавить верхнюю обивку в строку состояния Cordova

Невозможно сбросить гистограмму JavaScript

Кнопки CSS не нажимаются в зависимости от размера и поля (мобильный)

Как обернуть текст вокруг оглавления

Как глобально избежать подчеркивания ссылок на HTML-странице

Источник не найден при импорте CSS в JavaFX

HTML / CSS дизайн для веб-страницы

Как устранить разрыв в липком режиме?

Проблемы с откликом липкого заголовка

Ответы 2

Другие вопросы по теме

Похожие вопросы