畫布外菜單和固定位置的標題

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

至於轉換后標題變得“未固定”：這似乎是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-轉換

摘要
...
如果該屬性的值等於零，則將創建一個堆棧上下文。 在那種情況下，對象將充當位置的包含塊：它包含的固定元素。

這意味着，代替體， #page將現在為包含塊#secondHeader 。

由於secondHeader的position: fixed; top: 0;是position: fixed; top: 0; position: fixed; top: 0; ，現在將其固定在page頂部。

如@janfoeh所示，您可以通過將內部div移到外部來“修復”它，並在內部div（現在是外部）上復制必要的轉換。