Булавка ScrollMagic изменяет начальную позицию Y закрепленного элемента

Я работаю над веб-страницей с панелью навигации. Эта панель навигации имеет два элемента div: один для логотипа, а другой для меню. Оба элемента div изначально находятся в одном и том же положении Y, но когда я пытаюсь закрепить элемент меню, он меняет свое начальное положение Y на нижнее.

Почему? Заранее спасибо!

Я изолировал проблему в codepen: http://codepen.io/aitormendez/pen/NbvpXj< /а>

Удалив JS из кода, div меню становится в исходной позиции Y.

HTML:

<body>
  <header class="banner">
  <nav class="navbar">
    <div class="navbar-brand-container">
      <a class="navbar-brand" href="#"><div class="logo-int">Logo</div></a>
    </div><div class="menu-1">
    <p>Menu 1</p>
    </div>
  </nav>
</header>
</body>

JS:

var controller = new ScrollMagic.Controller();
  // Pin menu-1
  var pinM1Scene = new ScrollMagic.Scene({
    triggerElement: '.menu-1',
    triggerHook: 0
  })
  .setPin('.menu-1')
  .addTo(controller);

javascript css scrollmagic
person aitor    schedule 26.11.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец то я понял. Автоматически вставленный div.scrollmagic-pin-spacer имеет display: inline-block. Итак, я говорю, чтобы выровнять по верхнему краю:

.scrollmagic-pin-spacer {
      vertical-align: top;
    }
person aitor    schedule 27.11.2016