javascript - addClass 上的容器折叠

Question

我正在构建我的个人作品集，当我在 jQuery 上 .addClass 时，我的 .main-nav 和我的 container 一起崩溃了。这是它的样子:

.main-nav {
  width: 100%;
  height: 5em;
  background: #595959;
  box-shadow: 2px 2px 2px rgba(0,0,0, .3);
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.sticky {
  position: fixed;
  top: 0;
}

J查询:

var yourNavigation = $(".main-nav");
    stickyNav = "sticky";
    myHeader = $('.main-header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > myHeader ) {
    yourNavigation.addClass(stickyNav);
  } else {
      yourNavigation.removeClass(stickyNav);
  }
});

所以当我滚动到标题下方时，随着 .main-nav 变得固定，它下面的容器占据了顶部剩余的空间，这使得它折叠起来。

有什么建议吗？欢迎任何帮助!

谢谢!

Answer 1

如果我对你的理解是正确的，你的导航栏在修复后会被驱动到左下角。

解决方法很简单。将此添加到 .sticky 样式:

.sticky {
  ...
  right: 0;
  left: 0;
  ...
}

如果它不适合你，请发布你的 html 以便我们可以尝试(更好的是，创建一个 JS Fiddle)，澄清你的问题并提供显示问题的屏幕截图.