固定位置不适用于标题

Question

I am trying to make my header fixed so that it will scroll along with the page for both mobile and desktop. The thing is that it was working earlier but as I kept coding, it stopped working. I have tried getting rid of codes to see if any of them was effecting it but that wasn't the case.

Here is the HTML code:

<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>

Here is the 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);
}

And here is the js:

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

I have tried specifying a height for the header and even using a sticky nav plugin to make it fixed; however none of those has worked. And I am not sure what to do anymore.

If you want to view the issue on the website, you can see it here: www.international-aset.com/intaset

Thanks!

Answer 1

Your issue is that you have a transform on your content element.

This is because the transform creates a new local coordinate system, this means that fixed positioning becomes fixed to the transformed element, rather than the viewport.

I can see you are using transform for you mobile nav, a few solutions would be

• Use a negative margin instead of transform
• Absoultely position your parent element and use left -180px etc
• Move your nav outside of the container, fix its position then add padding at the top of your page.

Hope one of those work for you