Меню на холсте и фиксированный позиционированный заголовок

Question

Я создаю очень основное меню холста, все работает блестяще, но это одна маленькая вещь, которую я не могу исправить!

1. Посетите www.loaistudio.com и измените размер окна до 1000 пикселей.
2. Прокрутите немного вниз, а затем нажмите кнопку «Меню» в верхнем левом углу заголовка.

Почему это отчаяние? это на самом деле не отчаивается, а просто переместится на самую верхнюю часть страницы! Почему это? Как я могу это исправить и просто держать его в верхней части области просмотра ...

Вот HTML

<div id="page"><!--Main Container--> 
    <!--Header (small screens only)--> 
    <div id="secondHeader"> 
     <a class="secondHeader-menuButton" href="#">Menu</a> 
     <p id="logo-smallScreen">Website Name</p> 
    </div> 

    <!--/////////////////////////////////////////////////--> 

    <div class="wrapper"> 
     <div id="homeSectionA" class="content"> 

      <h1>Header One</h1> 

      <h2>Header Two</h2> 

      <h3>Header Three</h3> 

      <h4>Header Four</h4> 

      <br> 

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

      <br> 

      <p><strong>Paragraph Strong</strong></p> 

      <p><em>Paragraph Empaissaied</em></p> 

      <p><small>Paragraph Small</small></p> 

      <br> 

      <a>I am a Button</a> 

      <br><br> 

      <p><strong>List</strong></p> 

      <ul> 
       <li>List Item</li> 
       <li>List Item 
        <ul> 
         <li>Sub List Item</li> 
         <li>Sub List Item</li> 
        </ul> 
       </li> 
      </ul> 

      <br> 

      <p><strong>List</strong></p> 

      <ol> 
       <li>List Item</li> 
       <li>List Item 
        <ol> 
         <li>Sub List Item</li> 
         <li>Sub List Item</li> 
        </ol> 
       </li> 
      </ol> 

      <br> 

      <p>Abber (<abbr title="Oh, you found me :)">Hover over me</abbr>).</p> 

      <br> 

      <p>Paragraph<sub>subscript.</sub></p> 

      <br> 

      <p>Paragraph<sup>subscript.</sup></p> 

      <br> 

      <p>Paragraph<mark>Marked Line</mark></p> 

      <br> 

      <img alt="" src="http://placehold.it/600x400/cdcdcd"> 
     </div> 
    </div> 

    <!--Footer--> 
    <footer id="footer"> 
     <?php include ("assets/templates/footer.inc"); ?> 
    </footer> 
</div><!--The End Of The Page--> 

CSS

/* Landscape Tablets //////////////////////////////////////////////////////////////////////////////////*/ 
@media screen and (max-width: 1024px) { 

    body, #headerContent { 
     min-width: 100%; 
    } 

    /*PAGE LAYOUT ==================================================================*/ 
    /*Main Page Container*/#page { 
     padding-top: 50px; 
     z-index: 1; 
     -webkit-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8); 
     -moz-box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8); 
     box-shadow: -3px 0px 20px rgba(0, 0, 0, 0.8); 

     -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -ms-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
     transition: all 0.2s ease-out; 
    } 

    /*Content Container*/ 
    .content { 
     padding: 30px; 
    } 


    /*HEADER ======================================================================*/ 
    /*Header Wrapper*/ 
    #headerWrapper { 
     background-color: #191E25; 

     width: 200px; height: 100%; 
     z-index: 0; 

     -webkit-box-shadow: none; 
     -moz-box-shadow: none; 
     box-shadow: none; 

     -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -ms-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
     transition: all 0.2s ease-out; 

     -webkit-transform: translate(-200px, 0px); 
     -moz-transform: translate(-200px, 0px); 
     -o-transform: translate(-200px, 0px); 
     -ms-transform: translate(-200px, 0px); 
     transform: translate(-200px, 0px);  
    } 

     #headerWrapper.headerOpen { 
      -webkit-transform: translate(0px, 0px); 
      -moz-transform: translate(0px, 0px); 
      -o-transform: translate(0px, 0px); 
      -ms-transform: translate(0px, 0px); 
      transform: translate(0px, 0px);  
     } 

     #page.pageOpen { 
      -webkit-transform: translate(200px, 0px); 
      -moz-transform: translate(200px, 0px); 
      -o-transform: translate(200px, 0px); 
      -ms-transform: translate(200px, 0px); 
      transform: translate(200px, 0px); 
     } 


    /*Header Content Container*/ 
    #headerContent { 
     width: 210px; height: 100%; 
     padding: 0; 
     margin: 0; 
     overflow-y: auto; 
     overflow-x: hidden; 
    } 

     /*Header Logo*/ 
     #headerLogo { 
      display: none; 
     } 

     /*Main Menu*/ 
     #mainMenu, #mainMenu li { 
      text-align: left; 
      margin-top: 0; 
      float: none; 
     } 

     #mainMenu a { 
      color: #A0A8B1; 
      border-bottom: 1px solid #13171C; 

      width: 100%; 
      padding: 20px 0px 20px 20px; 
      margin: 0; 

      border-radius: 0; 
      -moz-border-radius: 0; 
      -webkit-border-radius: 0; 
     } 

      #mainMenu a:hover { 
       color: #CACFD3; 
       background-color: #232A34; 
      } 

      #mainMenu a.active { 
       color: #6E737A; 
       background-color: #13171C; 
      } 


    /*Second Header Container & Elements (Hidden From Widescreen)*/ 
    #secondHeader { 
     color: #FFFFFF; 
     background-color: #49AB8E; 
     border-bottom: 1px solid #398770; 

     width: 100%; 
     display: block; 
     position: fixed; top: 0; 
     padding: 0 20px 0 0; 
     z-index: 1000; 
     line-height: 50px; 
    } 

     .secondHeader-menuButton { 
      background: #41997F url('../../assets/elements/nav-icon.png') no-repeat 20px; 
      background-size: 25px 24px; 
      width: 120px; 
      display: inline-block; 
      font-weight: bold; 
      text-indent: 55px; 
     } 

      .secondHeader-menuButton-active { 
       background: #41997F url('../../assets/elements/nav-icon-close.png') no-repeat 20px; 
       background-size: 25px 24px; 
      } 

     #logo-smallScreen { 
      display: inline-block; 
      float: right; 
     } 



    /*PAGES ======================================================================*/ 
    /*Contact Page*/ 
    #contactDetails { 
     width: 50%; 
     padding-left: 50px; 
     margin-left: -6px; 
     text-align: center; 
    } 

    #contactForm { 
     width: 50%; 
    } 

} 





/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
/* Portrait Tablets ///////////////////////////////////////////////////////////////////////////////////*/ 
@media screen and (max-width: 770px) { 

    /*PAGE LAYOUT =================================================================*/ 
    /*Content Container*/.content { 
     padding: 20px; 
    } 


    /*PAGES ======================================================================*/ 
    /*Contact Page*/  
    #contactDetails, #contactForm { 
     width: 100%; 
     padding: 0; 
     margin: 0; 
    } 

    #contactDetails { 
     margin-top: 30px; 
    } 

} 





/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
/* Phones /////////////////////////////////////////////////////////////////////////////////////////////*/ 
@media screen and (max-width: 500px) { 

    /*PAGES ======================================================================*/ 
    /*Contact Page*/ 
    #contactDetails-normal { 
     display: none; 
    } 

    #contactDetails-smart { 
     display: block; 
     border-top: 1px solid #CED1D6; 
     padding-top: 30px; 
    } 

     #contactDetails-smart a { 
      color: #FFFFFF; 
      background-color: #49AB8E; 

      width: 100%; 
      padding: 10px 15px; 
      margin-bottom: 10px; 

      border-radius: 3px; 
      -moz-border-radius: 3px; 
      -webkit-border-radius: 3px; 
     } 

      #contactDetails-smart a:hover, 
      #contactDetails-smart a:active { 
       background-color: #398770; 
      } 

} 





/*//////////////////////////////////////////////////////////////////////////////////////////////////////*/ 
/* Mini Devices ///////////////////////////////////////////////////////////////////////////////////////*/ 
@media only screen and (max-width: 290px) { 

    #logo-smallScreen { 
     display: none 
    } 

} 

JavaScript:

$(document).ready(function() { 

    //Prevent clicking on .active links 
    'use strict'; $('.active').click(function(a) { 
     a.preventDefault(); 
    }); 

    //Smart Navigation 
    $(".secondHeader-menuButton").on('touchstart click', function(e) { 
     e.preventDefault(); 
     $("#page").toggleClass("pageOpen"); 
     $("#headerWrapper").toggleClass("headerOpen"); 
     $(this).toggleClass("secondHeader-menuButton-active"); 
    }); 

    $('.content').on('touchstart click', function() { 
     $("#page").removeClass("pageOpen"); 
     $('#headerWrapper').removeClass('headerOpen'); 
     $('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active"); 
    }); 

}); 

Answer 1

Попробуйте изменить #headerWrapper переходы:

-moz-transition: -moz-transform 0.2s ease-out; 
-o-transition: -o-transform 0.2s ease-out; 
-webkit-transition: -webkit-transform 0.2s ease-out; 
transition: transform 0.2s ease-out 

Как для заголовка становится «нефиксированной» после перевода: это кажется known bug in Webkit.

Вы можете исправить это:

1) движущемся #secondHeader вне #page:

<body> 
     <header id="headerWrapper"></header> 
     <div id="secondHeader"></div> 
     <div id="page"></div> 
    </body> 

2) добавить новый класс CSS:

#page.pageOpen, #secondHeader.pageOpen { 
     -webkit-transform: translate(200px, 0px); 
     -moz-transform: translate(200px, 0px); 
     -o-transform: translate(200px, 0px); 
     -ms-transform: translate(200px, 0px); 
     transform: translate(200px, 0px); 
    } 

3) добавить переходы до #secondHeader

#secondHeader { 
     -moz-transition: -moz-transform 0.2s ease-out; 
     -o-transition: -o-transform 0.2s ease-out; 
     -webkit-transition: -webkit-transform 0.2s ease-out; 
     transition: transform 0.2s ease-out 
    } 

4) переключая этот класс через Javascript, а также:

$(".secondHeader-menuButton").on('touchstart click', function(e) { 
    e.preventDefault(); 
    $("#page, #secondHeader").toggleClass("pageOpen"); 
    $("#headerWrapper").toggleClass("headerOpen"); 
    $(this).toggleClass("secondHeader-menuButton-active"); 
}); 

$('.content').on('touchstart click', function() { 
    $("#page, #secondHeader").removeClass("pageOpen"); 
    $('#headerWrapper').removeClass('headerOpen'); 
    $('.secondHeader-menuButton').removeClass("secondHeader-menuButton-active"); 
}); 

Answer 2

Прежде всего, меню не исчезает. Он просто перемещается в начало #page. Когда вы перейдете к вершине, вы увидите это.

Это описано поведение, см MDN - transform

Резюме
...
Если свойство имеет значение, отличное, чем ничего, будет создан контекст штабелирования. В этом случае объект будет действовать как содержащий блок для позиции: фиксированные элементы, которые он содержит.

Это означает, что вместо того, чтобы тело, #page будет теперь содержащий блок для #secondHeader.

С secondHeader - position: fixed; top: 0;, он будет установлен в верхней части page.

Как показал @janfoeh, вы можете «исправить» его, переместив внутренний div наружу и продублировав необходимое преобразование на внутреннем (теперь снаружи) div.