Z-index не работает с элементами, связанными с анимацией gsap

Я не могу показать фиксированную кнопку при прокрутке изображений, я пробовал разные вещи, но, похоже, ничего не работает, даже если я z-index:999999999999999;.

Изображение использует плавную прокрутку с помощью gsap, теперь вы знаете, что следует изменить, или свойство z-index не работает со свойством transform: translate(-50%, -50%)....., которое изменяется для оболочки изображения при прокрутке.

const select = e => document.querySelector(e);
const selectAll = e => document.querySelectorAll(e);

const panels = selectAll(".panel")

function startAnim() {
gsap.registerPlugin(ScrollTrigger);
  
  panels.forEach((panel, i) => {
    let imageWrappers = panel.querySelectorAll(".col__image-wrap")
    console.info(imageWrappers)
    
    gsap.fromTo(imageWrappers, {
      y: "-30vh"
    }, {
      y: "30vh",
      scrollTrigger: {
        trigger: panel,
        scrub: true,
        start: "top bottom", // position of trigger meets the scroller position
      },
      ease: 'none'
    })
  })
}

function init() {
  startAnim();
}

window.onload = () => init()



const lenis = new Lenis()

lenis.on('scroll', (e) => {
  console.info(e)
})

function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)
.enquire-btn{ background-color: #222; color: #fff; min-width:150px; 
  padding:10px 25px; border-radius: 100px; text-decoration: none; 
  font-weight: normal; font-size: 14px;
  position: -webkit-sticky;
  position: sticky;
  position:fixed;
  z-index:99999999999999999999; 
}
body{background:#fff;}
.header{hight:60px; min-height:60px; background:#fff; ;
}
.h-line{height:1px; background:#000; margin-top:15px; }
.hero-section{margin-top:200px; z-index:20;}
.hs {
  text-transform: uppercase;
  font-family:Overusedgrotesk,sans-serif;
  color:#222;
  font-weight:200;
 letter-spacing: -5px;
font-size: clamp(2.1875rem, 0.9037rem + 5.4054vw, 9.6875rem);
}
.hs:first-child {font-weight:600; padding-right:10px;}


*, .panel, .project {
  padding: 0;
  margin: 0;
}

/* Full width section */
.panel {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 90vh;
  overflow: hidden;
  margin-top: 0vh;
  margin-bottom:0vh;
/*     background-color: red; */
}

/* In charge of setting the height/width/area */
.column {
  flex-basis:100%;
  position: relative;
  overflow: hidden;
}

/* Extra height for the parallax effect */
.col__image-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 160vh;
    background-color: red;
}

/* make sure it covers the total space */
.img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.intro-section{min-height:300px; background:grey; padding:30px 0px;}
.intro-section .section-heading {
  position:relative; withd:100%; padding:30px; 
  color:#fff; font-size:18px;}
<link href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel = "stylesheet"/>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/cerulean/bootstrap.min.css" rel = "stylesheet"/>

<header class = "container-fluid text-center header animate__animated animate__fadeIn animate__delay-800ms">
  <div class = "row justify-content-evenly vertical-align p-3 ">
    <div class = "col-4 align-middle">AHRE</div>
    <div class = "col-4 ms-auto">      <a class = "enquire-btn animate__animated animate__fadeInUp animate__slower">CONTACT US</a></div>
</div>
    <div class = "h-line animate__animated animate__slideInLeft animate__delay-900ms"></div>
  </div>
</header>
<section class = "container-fluid hero-section">
  <span class = "hs animate__animated animate__fadeInUp animate__delay-1s">The Residences</span>
</section>
<section class = "container-fluid section2 p-0">
   <div class = "panel panel--1">
    <div class = "column">
      <div class = "col__image-wrap">
      <img class = "img img--1" src = "https://assets-global.website-files.com/6594c68e852eed392813f26c/65968d19211871302df255cc_home-img-07.webp" />
    </div>
    </div>
  </div>
 
 
</section>
<section class = "intro-section">
  <div> <span class = "section-heading">Introduction</span></div>
</section>

<script src = "https://unpkg.com/[email protected]/dist/lenis.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

вы заметили предупреждение в консоли? Возможно, это актуально? и миллионы ошибок при прокрутке не помогают делу

Jaromanda X 20.06.2024 07:15

я не вижу никаких ошибок или предупреждений на своем локальном хосте.. только записи журнала.. Таким образом, проблема не связана с ошибкой на консоли... похоже, это записи журнала, а не ошибки

Learning 20.06.2024 07:33

1. gsap.registerPlugin(ScrollTrigger); отсутствует и 2. Они используют iFrame, поэтому вам нужно иметь относительно позиционированный элемент div с абсолютно позиционированной кнопкой, содержащей прокрутку и кнопку.

mplungjan 20.06.2024 07:36

Итак, когда вы запускаете фрагмент, который ВЫ разместили здесь, вы не видите никаких проблем в консоли? Странный

Jaromanda X 20.06.2024 07:49

@JaromandaX Если они удалят журнал консоли и добавят недостающий gsap.registerPlugin(ScrollTrigger);, это сработает. Основная проблема заключается в «z-index over iframe», который имеет много обманов.

mplungjan 20.06.2024 08:35

Я попытался добавить gsap.registerPlugin(ScrollTrigger); также добавлен тестовый div с относительной позицией и кнопка с абсолютной позицией с z-индексом.. это не работает.. Чего-то не хватает, чего я не могу понять.. Кажется, проблема связана только с элементами, которые связаны между собой изображением элементы или контейнеры, имеющие изображения с эффектом параллакса. Он отображается правильно поверх других контейнеров, в которых нет изображения с эффектом параллакса.

Learning 21.06.2024 08:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
95
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кнопка, которую вы пытаетесь поднять с помощью z-index, находится в другом контексте стекирования (более подробную информацию о контексте стекирования можно найти по этой ссылке) по сравнению с кнопкой section, которая в данный момент перекрывает ее. Из-за этого, как бы высоко вы ни сделали z-index кнопки, как вы видели, вы не сможете поднять ее над изображением. Увеличение z-index означает подъем кнопки относительно header, в котором она находится.

Что вам нужно сделать, это поднять z-indexheader так, чтобы он оказался над section(ами), которые следуют за ним. В этом примере кода, показывающем решение, вы можете увидеть, что все, что я изменил, это то, что я добавил следующие строки в ваш CSS и закомментировал значение кнопки z-index, чтобы показать, что оно не нужно:

header {
    z-index: 1;
    position: relative;
}

Очень поучительно, я всегда думал, что z-index связан с элементом. То, что вы упомянули, является хорошим объяснением, поскольку мне было интересно, что я делаю неправильно, игнорируя основы. Я попытался сделать позицию родительского div относительной, но это не сработало.

Learning 21.06.2024 18:25

Я рад, что смог помочь. Я думаю, что проблемы с z-индексом отпугивают многих людей. Желаем удачи в остальной части вашего проекта

Andrew 21.06.2024 18:38

Другие вопросы по теме