Может кто-нибудь помочь мне создать статическую боковую панель в двух колонках

Пожалуйста, помогите мне сделать эту правую боковую панель статичной, когда пользователь начинает прокрутку. Я новичок в адаптивном веб-дизайне. Я пытался использовать свойство "position:fixed", но я не знаю его возможности в адаптивном дизайне. Пожалуйста, помогите мне. Это ссылка http://the-bootstrap.obenland.it/page-with-comments/

Источник

3 ответа

Решение

JSfiddle for you - JSfiddle for you

Создайте такой класс:

.fixed {

          position:fixed;
          right:88px; /*insert this aswell*/
       }

И используйте его с разделом боковой панели, как показано ниже.

<section role="complementary" class="widget-area span4 fixed" id="secondary">
Источник

Использование

.fixed{
left:0;
position:fixed;
top:Height_of_logo;
}

Это создаст боковую панель, которая оставит место для логотипа сверху, но если вы хотите, чтобы боковая панель скользила вверх, когда пользователь прокручивает страницу вниз, а затем придерживалась, когда логотип выходит за рамки, тогда я бы предложил вам использовать плагин Jquery, как этот

http://viget.com/inspire/jquery-stick-em

Этот сайт имеет очень хорошую документацию вместе с демо.

Источник

Если вы хотите придерживаться принципов адаптивного веб-дизайна, простое применение position:fixed не поможет. Если вы хотите, чтобы он хорошо работал на небольших экранах, вам понадобится условный код. Это должно быть исправлено на "нормальном" экране, и вам нужно будет удалить класс, когда экран станет "слишком маленьким". Вам также придется решить, что для вас означает "нормальный" и "слишком маленький". Смотрите здесь для примера:

http://home.edgemontgeek.com/dev/stackru/14919523/

Имейте в виду, что вам также нужно контролировать высоту экрана. Если окно недостаточно велико, чтобы вместить фиксированный контент, они не смогут его увидеть. Вы можете рассмотреть возможность использования двух столбцов, которые можно прокручивать отдельно.

Источник
Другие вопросы по тегам