Question

我正在使用导航栏处理网页。此导航栏有两个div，一个用于徽标，另一个用于菜单。两个div最初都处于相同的Y位置，但是当我尝试固定菜单div时，它会将其初始Y位置更改为down。

为什么呢？提前谢谢！

我已经在codepen中隔离了这个问题： http://domain.com/homework/current

删除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);

Answer 1

最后，我明白了。自动插入的div.scrollmagic-pin-spacer有一个display: inline-block。所以，我告诉它与顶部对齐：

.scrollmagic-pin-spacer {
      vertical-align: top;
    }

ScrollMagic引脚更改固定元素的初始Y位置

1 个答案: