스마트 폰 고정 탐색 모음이 선택 후 닫히지 않음

나는이 포럼에서 좋은 정보를 얻었고 이것이 나의 첫 번째 질문이다.

고정 된 상단 탐색 모음이 있습니다.

고정 부분이 잘 작동하는 것 같지만 이제 두 가지 문제가 있습니다.

반응 형 모드에서 햄버거 아이콘을 클릭하면보기 좋게 열리고 페이지의 앵커로 이동할 수 있습니다 (나는 1 페이지 사이트를 디자인 중입니다). 그러나 탐색은 클릭하거나 탭할 때 닫히지 않으므로 열린 탐색이 남습니다.

두 번째 문제는 탐색이 고정되고 아래로 스크롤하여 양식 위로 이동하면 양식 필드가 탐색 모음 상단에 960 너비 및 반응 형으로 표시됩니다.

나는 여기에 코드라고 생각하는 것을 첨부했으며 어떤 조언이라도 대단히 감사하겠습니다.

건배 맥스

이것은 html입니다.

<nav class="clearfix">
<ul class="clearfix">
    <li><a href="index.html"><span style="color:white">Home</a>
    </li>
    <li><a href="book.html"><span style="color:white">Book</a>
    </li>
    <li><a href="#join"><span style="color:white">Join</a>
    </li>
    <li><a href="contact.html"><span style="color:white">Contact</a>
    </li>
   </ul>
   <a href="#" id="pull"><span style="color:white">Menu</span></a>

이것은 CSS입니다.

/* Clearfix */

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */

nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 1em;
font-family: Roboto, sans-serif;
font-weight: 400;
position: fixed;
border-bottom: 2px solid #283744;
text-align: center;
}
nav ul {
padding: 0;
margin: 0 auto;
width: auto;
height: 40px;
}
nav li {
display: inline;
float: none;
}
nav a {
color: #fff;
display: inline-block;
width: 120px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px #303030;
}
nav li a {
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover,
nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: 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 #576979;
    border-right: 1px solid #576979;
}
nav a {
    text-align: left;
    width: 100%;
    text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/

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

@media only screen and (max-width: 320px) {
nav li {
    width: 50%;
    float: left;
    position: relative;
}
nav li a {
    border-bottom: 1px solid #576979;
}
}

다음은 자바 스크립트입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

    $(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');
            }
        });
    });


</script>