Reputation: 226
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 -->
Upvotes: 0
Views: 247
Reputation: 3684
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'});
}
});
Upvotes: 1