固定位置不适用于标题

Question

我正在尝试修复我的标题，以便它可以随移动设备和桌面设备的页面一起滚动。问题是它之前工作过，但是当我继续编码时，它停止工作了。我已经尝试摆脱代码以查看是否有任何代码影响它，但事实并非如此。

这是 HTML 代码：

<div class='wrapper'>
  <div class='sidebar'>
    <div class='title'>
    </div>
    <ul class='nav'>
      <li><a href="index.html">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="publications.html">Publications</a></li>
      <li><a href="conferences.html">Conferences</a></li>
      <li><a href="#contact">Contact Us</a></li>
      </ul>
  </div>

<div class='content isOpen'>
<header>
    <div class="mobile grid">
    <div class="unit unit-s-2-3 unit-m-1-3 unit-l-1-3">
        <a href="index.html"><img src="img/logo.svg" class="flex-logo"></a>
    </div>
    <div class="unit unit-s-1-3 unit-m-2-3 unit-m-2-3-1 unit-l-2-3">
        <a class='button'></a>
    </div>
    </div>

    <div class="grid desktop">
        <div class="unit unit-s-1 unit-m-1-3 unit-l-1-3">
            <div class="unit unit-s-1 unit-m-1-3 unit-l-1-3 left">
                <a href="index.html"><img src="img/logo-square.svg" class="flex-logo"></a>
            </div>

            <div class="unit unit-s-1 unit-m-2-3 unit-l-2-3 desktop">
                <h1>International Academy of Science, Engineering, and Techonology</h1>
            </div>
        </div>

        <div class="unit unit-s-1 unit-m-2-3 unit-l-2-3 desktop-nav">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="publications.html">Publications</a></li>
                    <li><a href="conferences.html">Conferences</a></li>
                    <li><a href="#contact">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header> <!-- END HEADER -->
</div></div>

这是 CSS：

header {
position: fixed;
width: 100%;
background-color: #FFFFFF;
z-index: 999;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.wrapper {
  min-height: 100%;
  background-color: #AB1917;
}

.sidebar {
  position: absolute;
  width: 135px;
  background-color: #AB1917;
height: 100%;
right: 0;
}

.content {
  background: #FFF;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  transform: translate3d(-135px,0,0);
  transition: transform .3s;
}

.content.isOpen {
  transform: translate3d(0px,0,0);
}

这里是js：

<script type="text/javascript">
$(document).ready(function() {
  $('.button').on('click', function() {
    $('.content').toggleClass('isOpen');
  });
});
</script>

我尝试为标题指定高度，甚至使用粘性导航插件来修复它；但是这些都没有奏效。而且我不知道该怎么办了。

如果您想在网站上查看问题，可以在这里查看：www.international-aset.com/intaset

谢谢！

Answer 1

您的问题是您对内容元素进行了转换。

这是因为变换创建了一个新的局部坐标系，这意味着固定的定位变为固定到变换后的元素，而不是视口。

我可以看到你正在为你的移动导航使用转换，一些解决方案是

• 使用负边距而不是变换
• 绝对定位您的父元素并使用左 -180px 等
• 将导航移出容器，固定其位置，然后在页面顶部添加内边距。

希望其中一个对你有用