固定位置不适用于 header

Question

我正在尝试修复我的 header，以便它会随着移动和桌面页面一起滚动。问题是它早些时候工作但是当我继续编码时，它停止工作了。我曾尝试删除代码以查看是否有任何代码正在影响它，但事实并非如此。

这里是 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>

我试过为 header 指定高度，甚至使用粘性导航插件来固定它；然而，其中 none 有效。而且我不知道该怎么做了。

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

谢谢！

Answer 1

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

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

我看到您正在为移动导航使用变换，一些解决方案是

使用负边距代替变换
绝对定位你的父元素并使用 left -180px 等
将导航移到容器外，固定其位置，然后在页面顶部添加填充。

希望其中一个对你有用

固定位置不适用于 header

Fixed position not working for header

html

css

position

header

fixed