As I work on developing a landing page with a fixed position navbar that changes color based on scroll positions, here's my current code snippet:
// 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'});
}
});
The background color for .top-menu-navigation div changes accordingly. However, the link colors are defined in
.top-menu-navigation ul > li ajQuery('.top-menu-navigation ul > li a').css({'color' : '#ffffff'});if statement, but it didn't produce the desired outcome. How can I unify these two actions?
For additional insights, here's the complete content of my file:
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'm interested in merging the Sticky Top Nav and Color Change functionalities, if feasible. Also, am I correctly invoking jQuery on the appropriate objects (document, window)?
I've chosen to use jQuery instead of $ specifically for this static landing page intended for a Wordpress site.
Relevant HTML section:
<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>
...
</nav> <!-- end top-menu-navigation -->