javascript - 如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？

我看到了一个关于如何使用 CSS flex 制作漂亮的粘性滚动效果的教程。所以我想试一试并尝试使用 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;
}

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

最佳答案

这是因为滚动。它正在添加内联 css 和覆盖位置，这就是它移动的原因:

我已将 width: 100% 和 position: sticky 添加到类 .product-title .产品标题{ 宽度: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>

关于javascript - 如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58114697/

javascript - 如何解决从带有网格的 scrollmagic 生成的 <div> 的问题？

上一篇：html - 背景样式

下一篇：CSS响应式正方形网格