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等
将导航栏移出容器，修复其位置，然后在页面顶部添加填充。

希望其中一项为你工作

固定位置不适用于标题

1 个答案: