Может ли элемент с фиксированной позицией проходить как под, так и над секциями, используя fullpage.js? - PullRequest
Новая
       14

Может ли элемент с фиксированной позицией проходить как под, так и над секциями, используя fullpage.js?

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

У меня есть два компонента на странице: элемент с фиксированным положением, который закрывает окно браузера с дочерним изображением с прозрачным фоном, и вертикальный ползунок fullpage.js, основанный на преобразованиях CSS, со следующей разметкой: 

<body>
  <div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
  <div id="fullpage-container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>
</body>

Я бы хотел, чтобы фиксированный элемент отображался над первым разделом, чтобы изображение было видимым, а затем второй раздел, чтобы скользить по изображению, чтобы изображение исчезло под разделом.С вышеупомянутой разметкой это невозможно с любой комбинацией z-индексов, и если я поместил фиксированный элемент в #fullpage-container, то фиксированное положение .fixed-element больше не будет соблюдаться из-за преобразования в родительском элементе.

Есть ли способ достичь этого эффекта, который я пропустил?

1 Ответ

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

Не похоже, что это возможно.Главным образом потому, что всякий раз, когда вы изменяете z-index (который должен быть в разделе выхода или при загрузке раздела с помощью обратных вызовов fullpage.js onLeave или onLoad), изображение внезапно появляется или исчезает:

  • При изменении z-index на onLeave изображение исчезнет за 1-й секцией, когда секция перемещается к месту назначения.

  • При измененииz-index на afterLoad 2-го раздела, изображение будет находиться над 2-м разделом в течение небольшого периода времени, прежде чем 2-й раздел действительно перестанет двигаться.Таким образом, вы увидите, как он внезапно исчезает.

Единственная опция, которую я мог видеть, это:

  • Вы используете опцию fullPage.js scrollBar:trueтак что вы можете получить текущую позицию прокрутки, используя событие прокрутки (или любую библиотеку, которая делает это).Затем, когда вы обнаружите, что фиксированное изображение попадет во 2-й раздел, измените z-index прямо перед тем, как это сделать.Вы также сможете играть с z-index даже при размещении фиксированного элемента внутри оболочки.Так как fullPage больше не будет использовать преобразования css3 (хотя производительность не будет такой гладкой)
...