jQuery 取消绑定(bind)文档单击绑定(bind)到滚动位置

Question

我需要一些帮助来调整我的 jquery 函数的逻辑。该函数的工作原理如下:

有两个导航，主导航和子导航在页面加载时都可见。如果窗口滚动超过 375px(这样子导航不再可见)，导航上就会出现悬停效果，使子导航 div 向下滑动并更改为固定位置。如果您悬停或单击该导航，它会向上滑动。当您向上滚动到 375 像素以下时，备用导航会再次显示在原处。

我的问题是当你低于 375px 并点击文档时，它仍然使 sub-nav 元素向上滑动，这使得窗口滚动，这反过来又使 div 再次改变位置 - 导致一个不稳定的循环滑动和位置变化。

基本上我需要取消绑定(bind)一个点击事件但是我在这样做时遇到了麻烦...

我需要解绑的函数是:

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>

Answer 1

提出问题会让我在接下来的 2 分钟内自己解决:

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


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