jQuery Unbind Document Click tied to scroll position

I need some help adjusting the logic of my jquery function. Here's how the function works:

There are two navs, the main-nav and sub-nav both of which are visible when page loads. If the window is scrolled past 375px (so that the sub-nav is no longer visible), there is a hover effect on the navigation which makes the sub-nav div slide down and changed to a fixed position. If you hover or click off of that navigation, it slides up. When you scroll back up below 375px, 开发者_运维问答the alternate navigation is displayed again in place.

My problem is that when you are below 375px and click on the document, it still makes the sub-nav element slide up, which makes the window scroll, which in turn makes the div change position again– resulting in a jerky cycle of sliding and position changes.

Basically I need to unbind a click event but am having trouble doing so...

The function i need to unbind is:

headerClickOff()

Here's the full 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'
                });
            });
        });
    }
});

and 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;
    }

here's the 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>

Something about asking a question makes me solve it myself in the next 2 minutes:

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


$(document).bind('click', headerClickOff);
$(document).unbind('click', headerClickOff);