Реализовать левый сайдбар, как на примере

@zudogav · Регистрация: 20.11.2014

Author24 — интернет-сервис помощи студентам

Подскажите, каким образом реализовать хедер слева как здесь?
Как сделать, чтобы ширина контента была 100% не от левого края экрана, а от фиксированного блока хедера

@mrtoxas · 25.10.2016, 18:17

Ну ладно еще по картинке объяснять, но есть уже готовая рабочая страница и вы спрашиваете как? Откройте инструменты разработчика и посмотрите как там у них все сделано и какие стили используются. Или за вас посмотреть, а потом пересказать?

@zudogav · 25.10.2016, 18:37 **[ТС]**

Сделал, но если уменьшать высоту браузера, то текст в фиксированном блоке скрывается.
Как реализовать прокрутку фиксированного блока?

@mrtoxas · 25.10.2016, 19:03

CSS

html,body{
  height:100%;
  
}
.block{
  position: fixed;
  width:200px;
  height:100%;
  background:gray;
}
.content{
  position: absolute;
  height:100%;
  width:100%;
  overflow: hidden;
  overflow-Y:auto;
}

HTML5

<div class="block">
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit quis neque maxime modi dolores vero doloremque error ad, placeat voluptates iure nihil, molestias et reprehenderit, eligendi eos dicta unde eius.
    </div>
</div>

Но не думаю, что это красиво будет. Вот на странице по вашей ссылке сделали - при уменьшении ширины окна, хедер перестает быть фиксированным и занимает свое первоначальное место.

@zudogav · 25.10.2016, 19:16 **[ТС]**

Про ширину понятно. Вопрос в другом, если ширина остается для монитора, а высота уменьшается. В примере в этом случае видимо скриптом меняется свойство top у фиксированного блока. Вот это и не понятно как сделать

@mrtoxas · 25.10.2016, 19:21

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

@zudogav · 25.10.2016, 19:26 **[ТС]**

Конечно посмотрел. Да, нужно чтобы при прокрутке прокручивалась сама страница и вместе с ней хэдер, который останавливался бы в нижнем положении.

@Fedor92 · 25.10.2016, 19:28

mrtoxas, не мудри особо, у него там parallax...

zudogav, хедер - это шапка, в Вашем случае на десктопе - это левый сайдбар... Поэтому умный человек дал классу название side-header, то бишь на десктопной версии - side, на мобильной header... Улавливаете мысль?

@zudogav · 25.10.2016, 19:36 **[ТС]**

Я это улавливаю. Но вопрос не про мобильную версию. А про десктоповую, но с уменьшеной высотой

@Fedor92 · 25.10.2016, 19:41

Сообщение от zudogav

Но вопрос не про мобильную версию.

Я к этому и подводил, что у Вас вопрос по вёрстке сайдбара, а не шапки...

А высота отступа контентной части от верха при уменьшении высоты экрана высчитывается js-скриптом на странице, что Вы предоставили...

@zudogav · 25.10.2016, 21:49 **[ТС]**

А как бы стыбрить этот скрипт?

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
		1
	Реализовать левый сайдбар, как на примере 25.10.2016, 17:57. Показов 5550. Ответов 10 Метки нет (Все метки) Подскажите, каким образом реализовать хедер слева как здесь? Как сделать, чтобы ширина контента была 100% не от левого края экрана, а от фиксированного блока хедера 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.10.2016, 18:17	2
	Ну ладно еще по картинке объяснять, но есть уже готовая рабочая страница и вы спрашиваете как? Откройте инструменты разработчика и посмотрите как там у них все сделано и какие стили используются. Или за вас посмотреть, а потом пересказать? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 18:37 [ТС]	3
	Сделал, но если уменьшать высоту браузера, то текст в фиксированном блоке скрывается. Как реализовать прокрутку фиксированного блока? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:16 [ТС]	5
	Про ширину понятно. Вопрос в другом, если ширина остается для монитора, а высота уменьшается. В примере в этом случае видимо скриптом меняется свойство top у фиксированного блока. Вот это и не понятно как сделать 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	25.10.2016, 19:21	6
	Вы смотрели мой пример? Или вы хотите, чтобы хедер доходил до нижнего края, становился фиксированным там, и обрезался бы верхней границей экрана? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:26 [ТС]	7
	Конечно посмотрел. Да, нужно чтобы при прокрутке прокручивалась сама страница и вместе с ней хэдер, который останавливался бы в нижнем положении. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	25.10.2016, 19:28	8
	mrtoxas, не мудри особо, у него там parallax... zudogav, хедер - это шапка, в Вашем случае на десктопе - это левый сайдбар... Поэтому умный человек дал классу название side-header, то бишь на десктопной версии - side, на мобильной header... Улавливаете мысль? 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 19:36 [ТС]	9
	Я это улавливаю. Но вопрос не про мобильную версию. А про десктоповую, но с уменьшеной высотой 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	25.10.2016, 19:41	10
	Сообщение от zudogav Но вопрос не про мобильную версию. Я к этому и подводил, что у Вас вопрос по вёрстке сайдбара, а не шапки... А высота отступа контентной части от верха при уменьшении высоты экрана высчитывается js-скриптом на странице, что Вы предоставили... 0

@zudogav 4 / 4 / 1 Регистрация: 20.11.2014 Сообщений: 44
	25.10.2016, 21:49 [ТС]	11
	А как бы стыбрить этот скрипт? 0