我正在处理带有导航栏的网页。这个导航栏有两个 div，一个用于 Logo ，另一个用于菜单。两个 div 最初都位于相同的 Y 位置，但是当我尝试固定菜单 div 时，它会将其初始 Y 位置更改为向下。
为什么？提前致谢!
我已经在 codepen 中隔离了问题: http://codepen.io/aitormendez/pen/NbvpXj
去掉codepen的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);
最佳答案
我终于明白了。自动插入的 div.scrollmagic-pin-spacer 有一个 display: inline-block。所以，我告诉它与顶部对齐:
.scrollmagic-pin-spacer {
vertical-align: top;
}
关于javascript - ScrollMagic pin 更改固定元素的初始 Y 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40822016/