当我的响应菜单打开时，我如何删除用户转到侧面的功能

我使用一些JavaScript函数来处理响应菜单，但我遇到了一个问题。到目前为止，我的菜单功能很好，但我希望当它打开时，用户没有机会站在一边。以下是视频中的问题：http://screencast.com/t/yQkGV9XTJm

这是我的JavaScript代码：

(function($)
{
    $('#side-block-toggle-icon').click(function(e)
    {
        e.preventDefault();
        $('body').toggleClass('side-block');
        $('#expose-mask').toggle();
    });
    $('#expose-mask').click(function(e)
    {
        $('body').removeClass('side-block');
    });
})(jQuery);

我的HTML代码：

<!-- NAVIGATION -->
<div id="navigation">
    <div class="wrapper">
        <span id="side-block-toggle-icon" title="Navigation"></span>
        <div id="side-block">
            <ul>
                <li>
                    <a href="../." class="home active">Home</a>
                </li>
                <li>
                    <a href="../shop/shop.php" class="shop ">Shop</a>
                </li>
                <li>
                    <a href="../community/" class="forums">Community</a>
                </li>
                <li>
                    <a href="#" class="support ">Support</a>
                </li>
            </ul>
        </div>
    </div>
</div>        
<!-- HEADER -->
<div id="header">
    <div class="wrapper">
        <h1 id="logo">
            <a href="../.">Logo</a>
        </h1>
    </div>
</div>        
<!-- CONTAINER -->
<div class="wrapper">
    <div id="container">
        <div id="breadcrumb-top" class="breadcrumb">
            <ul>
                <li>
                    <a href="./.." class="home">Home</a>
                </li>
            </ul>
        </div>
        <h1 id="welcome-to" class="big-title">Web site for highly customized styles for the <a href="http://xenforo.com" target="_blank" style="border-bottom: 2px solid;">XenForo forum software</a>.</h1>
        <h1 id="all-available-styles" class="big-title">All available styles</h1>
        <p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
        <div id="breadcrumb-bottom" class="breadcrumb">
            <ul>
                <li>
                    <a href="./.." class="home">Home</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="footer">
    <div class="wrapper">
        <ul>
            <li>
                <a id="help" class="overlay-trigger" href="help.php">Help</a>
            </li>
        </ul>
        <span id="footer-copyright">
            <a href="./..">Coded by Dylan.</a>
        </span>
    </div>
</div>
<div class="overlay-box">
    <div class="overlay-box-container">
        <span class="overlay-box-closer" title="Close the overlay"></span>
        <h1 class="big-title">Help</h1>
        <p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
    </div>
</div>
<div id="expose-mask" style="display: none;"></div>
    <script src="javascript/scripts.js"></script>

和我的CSS代码：

.overlay-box
{
    background-color: #FFFFFF;
    display: none;
    position: fixed;
    top: 35%;
    right: 0;
    left: 0;
    z-index: 3;
    width: 50%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    transition: opacity 500 ease-in-out;
    -webkit-transition: opacity 500 ease-in-out;
}
.overlay-box-container
{
    margin: 20px;
}
.overlay-box-closer:before
{
    content: "'f00d";
    position: absolute;
    top: -21px;
    right: -15px;
    cursor: pointer;
    font-size: 40px;
}
.big-title
{
    margin-bottom: 20px;
}
/* BASE */
h1, h2, h3, h4, h5, h6
{
    font-weight: normal;
}
h1
{
    font-size: 25px;
}
h2
{
    font-size: 20px;
}
h3
{
    font-size: 18px;
}
h4
{
    font-size: 17px;
}
h5
{
    font-size: 15px;
}
h6
{
    font-size: 13px;
}
ul, p, h1, h2, h3, h4, h5, h6
{
    margin: 0;
}
ul
{
    list-style-type: none;
    padding: 0;
}
/* CORE */
html
{
    overflow-x: hidden;
}
body
{
    background-color: #E6E9ED;
    color: #000000;
    font-family: Amaranth, ABeeZee, "Trebuchet MS", sans-serif;
    font-size: 13px;
    margin: 0;
    padding-bottom: 20px;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
}
.wrapper
{
    max-width: 975px;
    margin: 0 auto;
    padding: 0 20px 0 20px;
}
a
{
    color: #4D7799;
    text-decoration: none;
}
a:hover
{
    color: #CD3816;
    text-decoration: none;
}
#navigation a:before,
#navigation a:after,
#side-block-toggle-icon:before,
#side-block-toggle-icon:after,
#all-available-styles:before,
#all-available-styles:after,
#slideshow-pause-icon:before,
#slideshow-pause-icon:after,
#slideshow-play-icon:before,
#slideshow-play-icon:after,
#join-us-now:before,
#join-us-now:after,
#footer a:before,
#footer a:after,
.overlay-box-closer:before,
.overlay-box-closer:after
{
    font-family: FontAwesome;
    font-weight: normal;
}
/* NAVIGATION */
#navigation
{
    background-color: #283a4a;
    height: 60px;
}
#navigation li
{
    float: left;
}
#navigation a
{
    color: #FFFFFF;
    font-size: 13px;
    text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    display: block;
    padding: 0 20px;
    line-height: 60px;
}
#navigation a:hover
{
    background-color: #000000;
    text-decoration: none;
}
#navigation a.active
{
    background-color: #000000;
    font-weight: bold;
}
/* Navigation icons */
#navigation a:before
{
    float: left;
    font-size: 18px;
    margin-right: 5px;
}
#navigation a.home:before
{
    content: "'f015";
}
#navigation a.shop:before
{
    content: "'f07a";
}
#navigation a.forums:before
{
    content: "'f086";
}
#navigation a.support:before
{
    content: "'f1cd";
}
#side-block-toggle-icon
{
    display: none;
    text-align: left;
    line-height: 60px;
    margin-left: 20px;
}
#side-block-toggle-icon:before
{
    content: "'f0c9";
    font-size: 28px;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    cursor: pointer;
}
/* HEADER */
#header
{
    background-color: #3d5e78;
    height: 150px;
    margin-bottom: -75px;
}
#logo
{
    float: left;
}
#logo a
{
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 1) 0 1px 0;
    line-height: 75px;
}
#logo a:hover
{
    text-decoration: none;
}
/* CONTAINER */
#container
{
    background-color: #FFFFFF;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    overflow: hidden;
    padding: 20px;
}
/* Breadcrumb */
.breadcrumb
{
    background-color: #F5F5F5;
    height: 50px;
    margin: -20px;
    overflow: hidden;
}
.breadcrumb li
{
    float: left;
}
.breadcrumb a
{
    color: #000000;
    text-shadow: #FFFFFF 0 1px 0;
    margin-left: 20px;
    line-height: 50px;
}
.breadcrumb a:hover
{
    color: #CD3816;
}
.breadcrumb-separator
{
    margin-left: 20px;
}
#breadcrumb-top
{
    margin-bottom: 20px;
    border-bottom: #CCCCCC 1px solid;
}
#breadcrumb-bottom
{
    margin-top: 20px;
    border-top: #CCCCCC 1px solid;
}
#welcome-to,
#all-available-styles
{
    text-align: center;
}
#all-available-styles
{
    margin-bottom: 25px;
}
#all-available-styles:before,
#all-available-styles:after
{
    content: "'f122";
    display: inline-block;
    font-size: 28px;
    position: relative;
    top: 10px;
}
#all-available-styles:before
{
    transform: rotate(250deg);
    -webkit-transform: rotate(250deg);
    -ms-transform: rotate(250deg);
    -moz-transform: rotate(250deg);
    margin-right: 5px;
}
#all-available-styles:after
{
    margin-left: 5px;
    transform: rotate(100deg) scaleX(-1);
    -webkit-transform: rotate(100deg) scaleX(-1);
    -ms-transform: rotate(100deg) scaleX(-1);
    -moz-transform: rotate(100deg) scaleX(-1);
}
/* FOOTER */
#footer
{
    text-align: center;
    margin-top: 20px;
}
#footer ul
{
    display: inline-block;
}
#footer li
{
    float: left;
    margin-bottom: 15px;
}
#footer li:not(:first-child):not(:last-child)
{
    margin: 0 20px 0 20px;
}
#footer a
{
    color: #000000;
    text-shadow: #FFFFFF 0 1px 0;
}
#footer a:hover
{
    color: #CD3816;
}
#footer-copyright
{
    display: block;
    color: #808080;
    text-shadow: #FFFFFF 0 1px 0;
}
#footer-copyright a
{
    color: #808080;
    text-shadow: #FFFFFF 0 1px 0;
}
#footer-copyright a:hover
{
    color: inherit;
}
/* Footer icons */
#footer a:before
{
    font-size: 18px;
    margin-right: 5px;
}
#footer a.home:before
{
    content: "'f015";
}
#footer a.shop:before
{
    content: "'f07a";
}
#footer a.forums:before
{
    content: "'f086";
}
#footer a#help:before
{
    content: "'f1cd";
}
#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
/* RESPONSIVENESS */
@media screen and (max-width: 780px)
{
    .wrapper
    {
        padding-left: 0;
        padding-right: 0;
    }
    #navigation
    {
        position: inherit;
    }
    #navigation li, #navigation a:before
    {
        float: none;
        line-height: 0;
    }
    #side-block-toggle-icon
    {
        display: inherit;
    }
    #side-block
    {
        background-color: #283A4A;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 250px;
        transform: translateX(-250px);
        -webkit-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
        -moz-transform: translateX(-250px);
    }
    #side-block a
    {
        text-align: center;
    }
    .side-block
    {
        transform: translateX(250px);
        -webkit-transform: translateX(250px);
        -ms-transform: translateX(250px);
        -moz-transform: translateX(250px);
    }
    #side-block-toggle-icon a
    {
        text-align: center;
    }
    #logo
    {
        float: none;
        text-align: center;
    }
    #all-available-styles
    {
        font-size: 24.2px;
    }
    .slideshow-pause-and-play-icon
    {
        opacity: inherit;
    }
}

您可以在此处进行实时预览：http://nextgenfocus.com/test1/

我想要这样的：http://foundation.zurb.com/

我知道把overflow: hidden放在我的html上，问题就解决了，但我丢失了滚动条。。。你有解决方案吗？