Хватит прокручивать изображение заголовка на сайте Big Cartel - PullRequest
Новая
       11

Хватит прокручивать изображение заголовка на сайте Big Cartel

0 голосов
/ 27 сентября 2018

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

Это нормально для моей главной страницы магазинано что касается моей страницы Lookbook, она слишком много охватывает мой контент, и я хочу, чтобы он либо был скрыт, либо прекратил прокрутку.

У кого-нибудь есть решение этой проблемы?

Большое вам спасибо! 

.header {
  background-color: transparent;
  padding: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 97;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 20px;
  }
}
.header.overlay-header {
  position: relative;
}
.header .primary-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 15px;
}
.header .secondary-header {
  margin: 0 auto;
  text-align: center;
}
.header .header-center {
  text-align: center;
}

1 Ответ

0 голосов
/ 27 сентября 2018

Ваш заголовок - fixed, поэтому он будет в фиксированном положении относительно области просмотра.Просто сделайте это relative или удалите позицию все вместе, чтобы сделать это static. 

.header {
  background-color: transparent;
  padding: 50px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 97;
}

Было бы очень полезно, чтобы вы поняли свойство position в будущем, поэтому вот небольшойобзор.

Есть 5 различных значений положения , которые необходимо знать;

Статический (по умолчанию)

Элемент с position: static; не позиционируется каким-либо особым образом;он всегда располагается в соответствии с обычным потоком страницы.Это определение position, если вы не установили его явно в своем CSS.

Относительный

Элемент с position: relative; расположен относительно его нормального положения, в котором он находится в иерархии.

Установка свойств top, right, bottom и left относительно позиционированного элемента приведет к его отклонению от его нормального положения.Другое содержимое не будет откорректировано, чтобы поместиться в промежутке, оставленном элементом.

Фиксированный

Элемент с position: fixed; расположен относительнов окне просмотра, что означает, что он всегда остается на том же месте, даже если страница прокручивается.Свойства top, right, bottom и left используются для позиционирования элемента.Если вы установите навигационную панель на fixed вверху, она всегда будет наверху представления.Если вы установите нижний колонтитул на fixed внизу, он всегда будет внизу представления и останется там при прокрутке.

Абсолютный

Элемент с position: absolute; позиционируется относительно ближайшего позиционированного предка (вместо позиционирования относительно окна просмотра, как фиксированный).

Однако;если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.

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

...