Question

所以我的网站有一个响应式jquery菜单，并使用typing plugin键入我的名字。但是当我在小屏幕上打开菜单时，我无法向下滚动以查看菜单打开时的姓名。

我想知道如何解决这个问题。

感谢。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Ben Poulter | Home</title>
    <!--Meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="img/favicon.ico" />
    <!--Font Awesome-->
    <script src=" https://use.fontawesome.com/e34b59385a.js "></script>
    <!--Font-->
    <link href="https://fonts.googleapis.com/css?family=Ubuntu|Roboto|Rubik" rel="stylesheet" />
</head>

<body class="home">
    <div>
        <nav class="clearfix">
            <ul class="clearfix">
                <li><a href="index.html"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
                <li><a href="about.html"><i class="fa fa-user" aria-hidden="true"></i> About Me</a></li>
                <li><a href="#"><i class="fa fa-code" aria-hidden="true"></i> Web Dev</a></li>
                <li><a href="#"><i class="fa fa-microchip" aria-hidden="true"></i> Projects</a></li>
                <li><a href="#"><i class="fa fa-id-card" aria-hidden="true"></i> Portfolio</a></li>
                <li><a href="https://github.com/BenThePoulter" target="_blank"><i class="fa fa-github" aria-hidden="true"></i> My GitHub</a></li>
            </ul>
            <a href="javascript:void(0)" id="pull">Menu</a>
        </nav>


        <h1 id="name"></h1>


        <!--JQuery-->
        <script src="js/jquery-3.2.0.min.js"></script>
        <script src="js/typeit.min.js"></script>
        <!--javascript-->
        <script type="text/javascript">
            $(function() {
                var pull = $('#pull');
                menu = $('nav ul');
                menuHeight = menu.height();

                $(pull).on('click', function(e) {
                    e.preventDefault();
                    menu.slideToggle();
                });

                $(window).resize(function() {
                    var w = $(window).width();
                    if (w > 320 && menu.is(':hidden')) {
                        menu.removeAttr('style');
                    }
                });
            });

            $(document).ready(function() {
                setTimeout(function() {
                    $('#name').typeIt({
                        strings: "Ben Poulter",
                        speed: 200
                    });
                }, 1000);
            });

        </script>
    </div>
</body>

</html>

SCSS：

@import 'sanitize';
//color pallet
$navmain: #3498db;

body {
    font-size: 16px;
    background-color: whitesmoke;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto', Helvetica, sans-serif;
    a {
        text-decoration: none;
         :hover {
            text-decoration: underline;
        }
    }
}

.home {
    background-image: url('../img/beach-sunset.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
            h1 {
            margin-top: 30vh;
            font-size: 140px;
            text-align: center;
            line-height: 120px;
            font-weight: 400;
            color: white;
            font-family: 'Rubik', sans-serif;
            text-shadow: 3px 3px rgba(255, 255, 255, 0.5)
        }
}

//nav CSS
// Clearfix
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

// Basic Styles
nav {
    height: 40px;
    width: 100vw;
    background: $navmain;
    font-size: 11pt;
    font-family: 'Ubuntu', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid darken($navmain, 20%);
    i:hover {
        text-decoration: none;
    }
    ul {
        padding: 0;
        margin: 0 auto;
        width: 600px;
        height: 40px;
        li {
            display: inline;
            float: left;
            a {
                border-right: 2px solid darken($navmain, 10%);
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
        }
         :last-child a {
            border-right: 0;
        }
    }
    a {
        color: #fff;
        display: inline-block;
        width: 100px;
        text-align: center;
        text-decoration: none;
        line-height: 40px;
    }
}

nav a:hover {
    background-color: darken($navmain, 10%);
    font-size: 16px;
    transition: 0.5s;
    text-decoration: none;
    color: white;
}

nav a#pull {
    display: none;
    color: white;
    text-decoration: none;
}


/*Styles for screen 600px and lower*/

@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid darken($navmain, 10%);
        border-right: 1px solid darken($navmain, 10%);
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}


/*Styles for screen 480px and lower*/

@media only screen and (max-width: 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #2980b9;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content: "";
        background: url('../img/nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
    #name {
        font-size: 90px
    }
}


/*Smartphone*/

@media only screen and (max-width: 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid darken($navmain, 10%);
    }
    #name {
        font-size: 65px;
        line-height: 80px
    }
    .four-oh-four {
        h1 {
            font-size: 70px;
        }
    }
}

当菜单输出时，我的网站不会向下滚动？

0 个答案: