Перемещение div так, чтобы он включал мою строку заголовка - PullRequest
Новая
       10

Перемещение div так, чтобы он включал мою строку заголовка

0 голосов
/ 08 мая 2018

Последние пару дней я пытался создать заголовок параллакса, я довольно близко подошел, но у меня есть еще одна проблема, которую нужно решить. Div, который включает в себя заголовок parallax и весь мой контент, не содержит мой заголовок. Это проблема, потому что она не прокручивается с остальной частью страницы и выглядит как липкий заголовок, который мне не нужен.

Вы можете увидеть мою проблему здесь: https://crispimages.co/

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

В данный момент у меня есть параллакс в "et-main-area", но он не включает навигационную панель. Если я перемещу параллакс-идентификатор вокруг, это нарушит эффект. Я не могу понять это!

HTML: 

<div id="et-main-area">
    <div id="parallax">
<div class="parralax__layer parallax__layer--back">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
</div>
<div  class="parralax__layer parallax__layer--base">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_6.png">
</div>

CSS: 

#parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;

}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}

.parralax__layer.parallax__layer--base{
transform: translateZ(-1px) scale(2.1);
}

.parralax__layer.parallax__layer--back{
transform: translateZ(-15px) scale(16.1);
}

1 Ответ

0 голосов
/ 09 мая 2018

Если вы делаете: 

#parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  margin-right:-20px;
}

скрывает дополнительную полосу прокрутки и все еще реагирует. Это единственный способ избавиться от лишней полосы прокрутки и не испортить другие стили.

...