Question

I’m in the process of making a landing page which includes a fixed position navbar that changes color on certain scroll positions. At the moment I’ve got this:

// 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'});
    }
});

Now, my class .top-menu-navigation is where I set the background of the div. However, the color of my links is set in .top-menu-navigation ul > li a. I was thinking I could just add jQuery('.top-menu-navigation ul > li a').css({'color' : '#ffffff'}); as a second rule in the if statement, but that didn’t work at all. How can I combine these two events?

Edit: I’m going to add a bunch more scroll positions later, I just want to get it to work on one first and I can figure the rest out myself.

For bonus points, my entire file looks like this:

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

I’d love to combine the Sticky Top Nav and Color Change functions, is there any way that’s possible? And am I calling jQuery on the right thing (document, window)?

I’m using jQuery instead of $ because I plan on making this a static landing page for a WordPress site.

Relevant html:

            <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

Just add one after another should work.

// 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'});
        }
});