与侧边栏导航一起使用时，Scrollmagic setPin会中断

时间：2020-06-23 12:06:28

标签： javascript scrollmagic

不确定这是否是scrollmagic的问题或我看不见的明显问题。我有两个相互独立运行的组件。第一个是侧边栏导航，可在内容打开时将其从画布中推出。第二个是使用scrollmagic固定的基本站点布局。

因此，导航和布局本身都可以正常工作，但是当我尝试将它们组合在一起时，会出现scrollmagic固定中断，而我不知道为什么。

首先，侧边栏导航（可使用{@ {3}}的数字笔）：

//JS

let wrapper = document.querySelector('#wrapper');

let button = document.querySelector('.site-content > button');

button.addEventListener('click', function() {
    wrapper.classList.toggle('show-nav');
})
// CSS

* {
  margin: 0;
  padding: 0;
}

#wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

nav {
        
        width: 300px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: tomato;
    color: white;
        z-index: 999999;
        box-shadow: none;
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    transition: all 300ms ease-in-out 0ms;
}

ul {
    list-style: none;
    text-decoration: none;
}

 a {
    text-decoration: none;
    color: white;
    font-size: 20px;
}

.show-nav nav {
  transform: translate(300px, 0);
  transform: translate3d(300px, 0, 0);
  box-shadow: 3px 0 6px  rgba(black, .4);   
}

.site-content { 
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  transition: all 300ms ease-in-out 0ms;
}

.show-nav .site-content {
  transform: translate(300px, 0);
  transform: translate3d(300px, 0, 0);
}

button {
  background-color: rgba(black, .7);
  color: white;
  cursor: pointer;
 }
<!-- HTML -->

<div id="wrapper">
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CAMPAIGNS</a></li>
      <li><a href="#">EVENTS</a></li>
    </ul>
  </nav>
  <div class="site-content">
    <button>Open Nav</button>
    <h1>Site content goes here</h1>
  </div>
</div>

第二，使用scrollmagic的基本布局（可用代码笔here）：

//JS

function pinOnScroll() {
  const controller = new ScrollMagic.Controller();
        const scene = new ScrollMagic.Scene({
            triggerElement: ".campaigns", 
            duration: '200%', 
            triggerHook: 0
        })
        .setPin(".campaigns-title")
        .addTo(controller);
}

pinOnScroll();
//CSS

* {
  margin: 0;
  padding: 0;
}

header {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  background-size: cover;
  color: white;
  font-family: sans-serif;
}

.campaigns {
  height: 300vh;
  width: 100%;
  display: flex;
}

.campaigns-title {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.campaigns-pages {
  width: 50%;
  height: 300vh;
}
            
.campaigns-pages > div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.campaigns-pages > div > p {
  width: 80%;
  font-size: 14px;
  line-height: 25px;
}

.campaigns-pages > div:nth-child(1) {
  background-color: #151515;
  color: white;
}

.campaigns-pages > div:nth-child(2) {
  background-color: #A63D40;
  color: white;
}

.campaigns-pages > div:nth-child(3) {
  background-color: #E9B872;
}

footer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: slategrey;
  color: white;
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

<!-- HTML -->

<div id="content">

            <header>
                <h1>Campaigning Site</h1>
            </header>

            <section class="campaigns">
                
                
                <div class="campaigns-title">
                    <h2>Our Campaigns</h2>
                </div>
                
                <div class="campaigns-pages">
                    <div>
                        <h2>Campaign One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
                    </div>
                    <div>
                        <h2>Campaign One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
                    </div>
                    <div>
                        <h2>Campaign One</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
                    </div>
                </div>
            </section>

            <footer>
                <h2>Site Footer</h2>
            </footer>
        </div>

最后，我试图将它们放在一起的失败尝试（代码笔here）：

let wrapper = document.querySelector('#wrapper');

let button = document.querySelector('.site-content > button');

button.addEventListener('click', function() {
    wrapper.classList.toggle('show-nav');
})

function pinOnScroll() {
  const controller = new ScrollMagic.Controller();
        const scene = new ScrollMagic.Scene({
            triggerElement: ".campaigns", 
            duration: '200%', 
            triggerHook: 0
        })
        .setPin(".campaigns-title")
        .addTo(controller);
}

pinOnScroll();
/* Reset */

* {
  margin: 0;
  padding: 0;
}

/* Nav */

#wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

nav {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: tomato;
  color: white;
  z-index: 999999;
  box-shadow: none;
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  transition: all 300ms ease-in-out 0ms;
}

nav > ul {
  list-style: none;
  text-decoration: none;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 20px;
}

.show-nav nav {
  transform: translate(300px, 0);
  transform: translate3d(300px, 0, 0);
  box-shadow: 3px 0 6px  rgba(black, .4);   
}

.site-content { 
 
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  transition: all 300ms ease-in-out 0ms;
}
  
.site-content > button {
  position: fixed;
  top: 5px;
  left: 5px;
  padding: 2px 5px;
  background-color: rgba(black, .7);
  color: white;
  cursor: pointer;
}

.show-nav .site-content {
  transform: translate(300px, 0);
  transform: translate3d(300px, 0, 0);
}

/* Content with scrollmagic pinned element */

.site-content > header {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  background-size: cover;
  color: white;
  font-family: sans-serif;
}

.campaigns {
  height: 300vh;
  width: 100%;
  display: flex;
}

.campaigns > .campaigns-title {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.campaigns > .campaigns-pages {
  width: 50%;
  height: 300vh;
}
            
.campaigns-pages > div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.campaigns-pages > div > p {
  width: 80%;
  font-size: 14px;
  line-height: 25px;
}

.campaigns-pages > div:nth-child(1) {
  background-color: #151515;
  color: white;
}

.campaigns-pages > div:nth-child(2) {
  background-color: #A63D40;
  color: white;
}

.campaigns-pages > div:nth-child(3) {
  background-color: #E9B872;
}

footer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: slategrey;
  color: white;
  font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

<div id="wrapper">

  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CAMPAIGNS</a></li>
      <li><a href="#">EVENTS</a></li>
    </ul>
  </nav>
  
  <div class="site-content">
  
    <button>Open Nav</button>
    <header>
      <h1>Campaigning Site</h1>
    </header>

    <section class="campaigns">

      <div class="campaigns-title">
        <h2>Our Campaigns</h2>
      </div>

      <div class="campaigns-pages">
      
        <div>
          <h2>Campaign One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
        </div>
        
        <div>
          <h2>Campaign One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
        </div>
        
        <div>
          <h2>Campaign One</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni ad incidunt in recusandae, nisi nihil quibusdam vero eveniet, soluta ut voluptas aperiam itaque optio reprehenderit molestias tempore fugit debitis deleniti. Facere quasi maiores rerum aliquid velit harum iusto minima similique assumenda omnis, voluptatibus sed.</p>
        </div>
        
      </div>
    </section>

    <footer>
      <h2>Site Footer</h2>
    </footer>
    
  </div>
</div>

这是对滚动魔术的限制，还是我缺少简单的东西？ 干杯， 罗

编辑：

所以问题似乎与我在父容器上使用转换有关，我认为这很有意义。但是，如果我想保留这种导航侧边栏并使用scrollmagic固定，似乎没有任何解决方法。请参阅开发者的评论here。

无论如何，我暂时终于发现了一个显而易见的问题：最简单的CSS修复程序可以使用position: sticky获得相同的功能。参见密码笔here。

0 个答案:

没有答案
相关问题
最新问题