jQuery Unbind Document Нажмите, привязанную к положению прокрутки

Мне нужна помощь в настройке логики моей функции jquery. Вот как работает функция:

Есть две навигации, основная и вспомогательная, обе из которых видны при загрузке страницы. Если окно прокручено за пределы 375 пикселей (так что вложенная навигация больше не видна), в навигации возникает эффект наведения, который заставляет вложенную навигацию скользить вниз и изменяться в фиксированное положение. Если вы наведете курсор мыши на эту навигацию или щелкнете по ней, она сдвинется вверх. Когда вы прокручиваете страницу ниже 375 пикселей, альтернативная навигация снова отображается на месте.

Моя проблема заключается в том, что когда вы находитесь ниже 375 пикселей и нажимаете на документ, он по-прежнему заставляет элемент вспомогательной навигации скользить вверх, что приводит к прокрутке окна, что, в свою очередь, заставляет элемент div снова менять положение, что приводит к прерывистому циклу скольжения и меняется положение.

В основном мне нужно отвязать событие клика, но у меня проблемы с этим...

Функция, которую мне нужно отвязать, это:

headerClickOff()

Вот полный jQuery:

$(window).scroll(function() {
    var scrolledpx = parseInt($(window).scrollTop());  
    if (scrolledpx < 375) {
        $('#nav ul, #header').unbind('mouseenter mouseleave');
        $(document).unbind('clicl');
        $('#header').addClass('showNav');
    } else {
        $('#header').removeClass('showNav');

        $('#nav ul').hover(function () {
            $('#header').slideDown({
                duration: 650, 
                easing: 'easeOutExpo'               
            }).css({
                'position' : 'fixed',
                'top' : '0px'
            });

        function headerClickOff() {
            $(document).click(function() {
                $('#header:visible').slideUp({
                    duration: 550, 
                    easing: 'easeOutExpo'
                });
            });
        }

        headerClickOff();

        $('#header').click(function( event ) {
            event.stopPropagation();
        });
        }, function () {
            $('#header').hover(function () {

            }, function () {
                $('#header').slideUp({
                    duration: 550, 
                    easing: 'easeOutExpo'
                });
            });
        });
    }
});

и CSS:

#headerContainer {
    width: 960px;
    position: relative;
    z-index: 900;
    }

#header {
    position: relative;
    width: 940px;
    background: #fff;
    padding: 74px 0 20px 20px;
    z-index: 1000;
    box-shadow: 0px 0px 13px #c3c1bd;
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
    }

#nav {
    width: 100%;
    height: 49px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    }

#nav ul {
    height: 49px;
    width: 920px;
    display: block;
    }

#nav ul li {
    height: 32px;
    list-style: none;
    display: block;
    float: left;
    background: #000;
    border-left: 1px solid #fff;
    font-family: "Fette";
    letter-spacing: 1px;
    text-transform: uppercase;
    }

#nav ul li a {
    display: block;
    float: left;
    color: #ccc;
    background: #000;
    height: 32px;
    padding: 7px 14px 0 14px;
    }

#nav ul li a:hover {text-decoration: none; background: #0099CC}

.showNav {
    display: block !important;
    position: relative !important;
    top: 0px !important;
    padding-bottom: 20px !important;
    }

вот HTML:

    <div id="nav">
        <ul class="center">
            <li>
                <a id="logo" href="index.html">
                    <img src="assets/images/logo.png" alt="" />
                </a>
            </li>

            <li>
                <a href="#">About</a>
            </li>

            <li>
                <a href="#">Contributors</a>
            </li>

            <li>
                <a href="#">Contact</a>
            </li>

        </ul> <!-- nav -->
    </div>

    <div id="headerContainer" class="center">
        <div id="header">   

            <h3 id="scrapHeader">Thoughts About:</h3>   

            <input id="headerSearch" type="text" value="search" />
            <input id="headerSearchBtn" type="submit" value="" />

            <div class="clear"></div>

            <div id="categoryContainer">
                <ul>
                    <li>
                        <a href="#">Design</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Building</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Brands</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Technology</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Fashion</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Leadership</a>
                        <strong>123</strong>
                    </li>
                    <li>
                        <a href="#">Architecture</a>
                        <strong>117</strong>
                    </li>
                    <li>
                        <a href="#">Sustainability</a>
                        <strong>108</strong>
                    </li>
                    <li>
                        <a href="#">Modern</a>
                        <strong>95</strong>
                    </li>
                    <li>
                        <a href="#">Advertising</a>
                        <strong>84</strong>
                    </li>
                    <li>
                        <a href="#">Film</a>
                        <strong>82</strong>
                    </li>

                    <li class="clear"></li>

                </ul>

                <span id="categoryMore">More</span>
                <div class="clear"></div>
            </div> <!-- categoryContainer -->
            <div class="clear"></div>
        </div> <!-- header -->
        <div class="clear"></div>
    </div>