Combinaison de deux événements avec jQuery

Question

Je suis en train de créer une page de destination qui inclut une barre de navigation à position fixe qui change de couleur sur certaines positions de défilement. En ce moment j'ai ceci:

// Change Nav Colors on Scrolldown 
var scroll_pos = 0; 
jQuery(document).scroll(function(){ 
    scroll_pos = jQuery(this).scrollTop(); 
    if(scroll_pos > 730){ 
     jQuery('.top-menu-navigation').css({'background-color' : '#000000'}); 
    } else if (scroll_pos < 730){ 
     jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'}); 
    } 
}); 

Maintenant, ma classe est .top-menu-navigation où je mets l'arrière-plan de la div. Toutefois, la couleur de mes liens est définie dans .top-menu-navigation ul > li a. Je pensais que je pouvais simplement ajouter jQuery('.top-menu-navigation ul > li a').css({'color' : '#ffffff'}); comme deuxième règle dans l'instruction if, mais cela n'a pas fonctionné du tout. Comment puis-je combiner ces deux événements?

Edit: Je vais ajouter un tas de positions de défilement plus tard, je veux juste que ça marche sur une première et je peux comprendre le reste moi-même.

Pour les points bonus, mon dossier complet ressemble à ceci:

jQuery(document).ready(function(){ 

    // Create jQuery Tabs 
    jQuery("#tabs").tabs().addClass('ui-tabs-vertical'); 


    // Sticky Top Nav 

    var NavTop = jQuery('.top-menu-navigation').offset().top; 

    jQuery(window).scroll(function(){ 
     if(jQuery(window).scrollTop() > NavTop) { 
      jQuery('.top-menu-navigation').css({position: 'fixed', top: '0px'}); 
     } else { 
      jQuery('.top-menu-navigation').css({position: 'static'}); 
     } 
    }); 

    // Change Nav Colors on Scrolldown 

    var scroll_pos = 0; 

    jQuery(document).scroll(function(){ 
     scroll_pos = jQuery(this).scrollTop(); 
      if(scroll_pos > 730){ 
       jQuery('.top-menu-navigation').css({'background-color' : '#000000'}); 
      } else if (scroll_pos < 730){ 
       jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'}); 
      } 
     }) 
    }); 

J'aimerais combiner les fonctions Sticky Top Nav et Color Change, est-il possible que ce soit possible? Et j'appelle jQuery sur la bonne chose (document, window)?

J'utilise jQuery au lieu de $ parce que je prévois d'en faire une page d'atterrissage statique pour un site Wordpress.

html pertinente:

  <nav class="top-menu-navigation"> 

       <ul> 
        <li><a href="">Menu Item 1</a></li> 
        <li><a href="">Menu Item 2</a></li> 
        <li><a href="">Menu Item 3</a> 
         <ul> 
          <li><a href="">Submenu Item 1</a></li> 
          <li><a href="">Submenu Item 2</a> 
           <ul> 
            <li><a href="">Link 1</a></li> 
            <li><a href="">Link 2</a></li> 
            <li><a href="">Link 3</a></li> 
           </ul> 
          </li> 
          <li><a href="">Submenu Item 3</a></li> 
         </ul> 
        </li> 
        <li><a href="">Menu Item 3</a></li> 
       </ul> 

      </nav> <!-- end top-menu-navigation --> 

Answer 1

Il suffit d'ajouter un après l'autre devrait fonctionner.

// Sticky Top Nav 
var NavTop = jQuery('.top-menu-navigation').offset().top; 

var scroll_pos = 0; 
jQuery(window).scroll(function(){ 
    if(jQuery(window).scrollTop() > NavTop) { 
     jQuery('.top-menu-navigation').css({position: 'fixed', top: '0px'}); 
    } else { 
     jQuery('.top-menu-navigation').css({position: 'static'}); 
    } 

    // Change Nav Colors on Scrolldown 

    scroll_pos = jQuery(this).scrollTop(); 
     if(scroll_pos > 730){ 
      jQuery('.top-menu-navigation').css({'background-color' : '#000000'}); 
     } else if (scroll_pos < 730){ 
      jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'}); 
     } 
});