jQuery Unbind Document Click tied to scroll position

Question

Hey,

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>

Answer 1

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);