窗口.除非页面重新加载，否则调整大小不起作用

我有这个响应式布局。我想要实现的是，在"桌面"大小，一旦菜单链接被点击，它将导航到页面的那一部分。我希望"移动"尺寸也是如此。此外，一旦菜单链接被点击，菜单将滑升。

我有这两个东西的工作，但它只工作时，页面重新加载。总而言之，以下是问题:

1. 在桌面大小:导航是好的，但当调整大小到移动菜单不显示。
2. 在手机大小:导航工作正常，当调整大小到桌面也工作正常，但菜单一直在切换。

我为它创建了一个jsFiddle。下面是我的代码:

HTML

<div id="head" class="clearfix">
    <a href="#" title="Pull Menu" id="pull">Pull Menu</a>
    <div class="menu-wrap clearfix">
        <div class="nav">
            <ul>
                <li><a href="#test1" title="test1">test1</a></li>
                <li><a href="#test2" title="test2">test2</a></li>
                <li><a href="#test3" title="test3">test3</a></li>
            </ul>
        </div>
    </div>
</div>
<div id="test1" class="section">Test1</div>
<div id="test2" class="section">Test2</div>
<div id="test3" class="section">Test3</div>

JavaScript

var respMenu = function(event) {
    var menu        = $('.menu-wrap');
    if ($(window).width() < 501) {  
        $("#pull").on('click', function() {
            menu.slideToggle('slow');
        });
        $(".nav ul li a").click(function() {
            menu.slideUp('slow');
        });
    }
    else{
    }
    return false;
    event.preventDefault();
};
var onClick = function() {
   $('a').bind('click',function(event){
       var $anchor = $(this);
       if ($(window).width() > 500) {
            $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 90 }, 1000,'easeInOutExpo');
        }
        else{
            $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 50 }, 1000,'easeInOutExpo');
        }
       event.preventDefault();
    });
};
$(window).load(function(){
    respMenu();
    onClick();
});
$(window).resize(function(){
    respMenu();
    onClick();
});