Question

我正试图在移动设备上从顶部创建滑动导航但是，我无法弄清楚为什么滑动导航位于标题之上。我希望标题始终位于顶部，我尝试了z-index和position：absolute但它没有解决问题。

代码：Fiddle

HTML

<!-- Navigation -->
<nav class="topHeader clearfix">
    <div class="headerWrapper">

    <div class="logo">
        <a href="#">Logo</a>
    </div>

    <div class="navigation">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>

    <div class="hamburgerMenu">
        <a href="#">
        <span></span>
        <span></span>
        <span></span>
        </a>
    </div>

    <div class="hamburgerNavigation">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </div>

    </div>
</nav>

SASS

$white: #ffffff
$black: #000000
$highlight: blue
// Navigation

*
  margin: 0
  padding: 0

.clearfix::after
  content: ""
  clear: both
  display: table

// Navigation
.topHeader
  width: 100%
  padding: 50px 0
  @media only screen and (max-width:768px)
    padding: 20px 0
    background-color: #dddddd
 .headerWrapper
    width: 90%
    margin: 0 auto
    .logo
      width: 100px
      float: left
      @media only screen and (max-width:768px)
        width: 80px
    .navigation
      float: right
      font-size: 1.125em
      padding-top: 16px
      @media only screen and (max-width:768px)
        display: none
      a
        color: $black
        text-decoration: none
        margin-left: 2em
        transition: 0.2s ease-in-out
        &:hover
          color: $highlight
    .hamburgerMenu
      cursor: pointer
      display: none
      margin-top: 8px
      @media only screen and (max-width: 768px)
        display: block
        float: right
      span
        display: block
        width: 25px
        height: 3px
        margin: 5px 0
        border-radius: 5px
        background-color: $black
        transform-origin: left center
        transition: 0.2s ease-in-out
    .open
      span
        &:nth-child(1)
          transform: rotate(45deg) translate(0px, 0px)
        &:nth-child(2)
          opacity: 0
          transform: translateX(-10px)
        &:nth-child(3)
          transform: rotate(-45deg) translate(-1px, 1px)
    .hamburgerNavigation
      left: 0
      top: 0
      display: none
      width: 100vw
      height: 100vh
      background-color: $black
      position: fixed
      opacity: 0
      transform: translate3d(0, -100vh, 0)
      transition: 0.2s ease-in-out
      @media only screen and (max-width:768px)
        display: flex
        align-items: center
        justify-content: center
        flex-flow: column
        a
          color: $white
          text-decoration: none
          font-size: 1.125em
          margin: 15px 0
    .show
      opacity: 1
      transform: translate3d(0, 0vh, 0)

JAVASCRIPT

$(document).ready(function(){
    $('.hamburgerMenu').click(function(){
        $(this).toggleClass('open');
    });
});


$('.hamburgerMenu').click( function() {
    $(".hamburgerNavigation").toggleClass("show");
} );

Answer 1

您可以将top设置为.topHeader

.topHeader .headerWrapper .show {
    opacity: 1;
    transform: translate3d(0, 0vh, 0);
    top: 77px; // Added
}

或者您可以设置否定z-index

.topHeader .headerWrapper .show {
        opacity: 1;
        transform: translate3d(0, 0vh, 0);
        z-index: -1; // Added
    }

在标题顶部滑动移动导航

1 个答案: