2016-11-26 5 views
0

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

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

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

Удаление JS из codepen, меню 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); 

ответ

0

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

.scrollmagic-pin-spacer { 
     vertical-align: top; 
    } 
Смежные вопросы