jQuery Unbind Document Cliquez pour faire défiler la position

Question

J'ai besoin d'aide pour ajuster la logique de ma fonction jquery. Voici comment la fonction fonctionne:

Il existe deux navs, le nav principal et le sous-nav qui sont tous les deux visibles lors du chargement de la page. Si la fenêtre fait défiler 375px (de sorte que le sous-nav n'est plus visible), il y a un effet de survol sur la navigation qui fait glisser le sous-nav vers le bas et le changer pour une position fixe. Si vous passez la souris ou cliquez sur cette navigation, elle glisse vers le haut. Lorsque vous faites défiler vers le haut en dessous de 375px, la navigation alternative est de nouveau affichée en place. Mon problème est que lorsque vous êtes en dessous de 375px et que vous cliquez sur le document, il fait toujours glisser l'élément sous-nav, ce qui fait défiler la fenêtre, ce qui à son tour fait changer de position div - résultant en un saccadé cycle de glissement et changements de position.

Fondamentalement, je besoin de délier un événement de clic mais j'ai du mal à le faire ...

La fonction i besoin de délier est:

headerClickOff() 

Voici le plein 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' 
       }); 
      }); 
     }); 
    } 
}); 

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

voici le code 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

Quelque chose au sujet de poser une question qui me fait résoudre moi-même dans les 2 minutes suivantes:

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


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