Как решить проблему с сгенерированным <div>из scrollmagic with grid? - PullRequest
Новая
       17

Как решить проблему с сгенерированным <div>из scrollmagic with grid?

0 голосов
/ 26 сентября 2019

Я видел учебник о том, как сделать хороший эффект липкой прокрутки с помощью CSS CSS.Так что я хотел дать ему шанс и попробовал это с сеткой CSS.но это не будет работать должным образом.Я уже исправил некоторые серьезные проблемы, но я не очень доволен исправлениями.и до сих пор существует серьезная проблема со столбцами сетки.Есть 2 столбца.слева только один div, а справа пара div.левый должен придерживаться так, чтобы правая колонка прокручивалась.но как только функция прокрутки сработает, правый столбец изменит ширину.я не могу найти решение здесь.остальное работает, но я уверен, что есть более элегантный способ добиться того, чего я хочу.Я очень ценю любую помощь!спасибо! Здесь также ссылка CodePen: https://codepen.io/roottjk/pen/QWLPwxZ

уже пытался решить проблему ширины с некоторыми свойствами ширины CSS, но это не помогло.

HTML 

    <div class="product-title">
        <h3>TEST</h3>
    </div>
  </div>
      <div class="sugar">

      </div>  
      <div class="private-label">


    </div>
      <div class="adventkalender">


    </div>
      <div class="sweets">

        </div>  

      <div class="ads">

        </div>

</section>

CSS 

section.products {  
    display: grid;
    grid-template-areas:
    'title sugar'
    'title private-label'
    'title adventkalender'
    'title sweets'
    'title ads';
    margin-bottom: 100vh !important; 
}

.gridhuelle {
    display: grid;
    grid-area: title;
    background-color: transparent !important;
    z-index: -1;
    width: 100% !important;
}

.gridhuelle h3 {
    color: white;
    z-index: 10;
}

.product-title {  
    background-color: black !important;
    z-index: 1;
    height: 300vh;
    padding-top: 10.1875px !important;
}

.sugar {
    display: grid;
    grid-area: sugar;
    background-color: red;
    z-index: 5;
    padding: 1em;
    margin: 0 !important;   
}

.private-label {
    display: grid;
    grid-area: private-label;
    background-color: green;
    padding: 1em;
}

.adventkalender {
    display: grid;
    grid-area: adventkalender;
    background-color: blue;
    padding: 1em;
}

.sweets {
    display: grid;
    grid-area: sweets;
    background-color: yellow;
    padding: 1em;
}

.ads {
    display: grid;
    grid-area: ads;
    background-color: orange;
    padding: 1em;
}

JS 

function splitScroll() {
   const controller = new ScrollMagic.Controller();
   new ScrollMagic.Scene({
       duration: '200%',
       triggerElement: '.product-title',
       triggerHook: 0
   })
   .setPin('.product-title')
   .addIndicators()
   .addTo(controller);
}
splitScroll();

1 Ответ

0 голосов
/ 26 сентября 2019

Это из-за прокрутки.он добавляет встроенную CSS и переопределяющую позицию, поэтому он перемещается:

Я добавил width: 100% и position: sticky в класс .product-title .product-title {width: 100%!важный;положение: липкое! важное;} 

/* Parallax Products */
function splitScroll() {
  const controller = new ScrollMagic.Controller();

  new ScrollMagic.Scene({
      duration: '200%',
      triggerElement: '.product-title',
      triggerHook: 0
    })
    .setPin('.product-title')
    .addIndicators()
    .addTo(controller);
}

splitScroll();
/* PRODUCTS */

section.products {
  display: grid;
  grid-template-areas: 'title sugar' 'title private-label' 'title adventkalender' 'title sweets' 'title ads';
  margin-bottom: 100vh !important;
}

.gridhuelle {
  display: grid;
  grid-area: title;
  background-color: transparent !important;
  z-index: -1;
  width: 100% !important;
}

.gridhuelle h3 {
  color: white;
  z-index: 10;
}

.product-title {
  background-color: black !important;
  z-index: 1;
  height: 300vh;
  padding-top: 10.1875px !important;
  width: 100%!important;
  position: sticky!important;
}

.sugar {
  display: grid;
  grid-area: sugar;
  background-color: red;
  z-index: 5;
  padding: 1em;
  margin: 0 !important;
}

.private-label {
  display: grid;
  grid-area: private-label;
  background-color: green;
  padding: 1em;
}

.adventkalender {
  display: grid;
  grid-area: adventkalender;
  background-color: blue;
  padding: 1em;
}

.sweets {
  display: grid;
  grid-area: sweets;
  background-color: yellow;
  padding: 1em;
}

.ads {
  display: grid;
  grid-area: ads;
  background-color: orange;
  padding: 1em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Products Test Page</title>
  <link rel="stylesheet" href="products.css" class="ref">
</head>

<body>


  <!-- PRODUCTS START-->
  <header class="productsite">
    <h2>Products</h2>
  </header>


  <!-- START Grid Section -->
  <section class="products">
    <div class="gridhuelle">

      <div class="product-title">
        <h3>TEST</h3>
      </div>
    </div>
    <div class="sugar">

    </div>
    <div class="private-label">


    </div>
    <div class="adventkalender">


    </div>
    <div class="sweets">

    </div>

    <div class="ads">

    </div>

  </section>
  <!-- END GRID SECTION -->
  <!-- PRODUCTS END-->

  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
  <script src="main.js"></script>
</body>

</html>
...