非画布菜单和固定定位标题

Question

我正在创建一个非常基本的画布菜单，一切都工作出色，但这一件小事我无法解决！

1. 访问www.loaistudio.com并将窗口重新调整为1000px以下。
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）在#page：

之外移动#secondHeader

    <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

  

<强>摘要
  ...
  如果属性的值不是none，则将创建堆叠上下文。 在这种情况下，对象将充当位置的包含块：它包含的固定元素。

这意味着#page现在将成为#secondHeader的包含块，而不是正文。

由于secondHeader为position: fixed; top: 0;，现在它将固定在page的顶部。

正如@janfoeh所示，你可以通过移动内部div来“修复”它，并在内部（现在是外部）div上复制必要的转换。