Databases
StackOverflow2013
Postsdbo
POCombining two events with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCombining two events with jQuery
    text
    copied!<p>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:</p> <pre><code>// Change Nav Colors on Scrolldown var scroll_pos = 0; jQuery(document).scroll(function(){ scroll_pos = jQuery(this).scrollTop(); if(scroll_pos &gt; 730){ jQuery('.top-menu-navigation').css({'background-color' : '#000000'}); } else if (scroll_pos &lt; 730){ jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'}); } }); </code></pre> <p>Now, my class <code>.top-menu-navigation</code> is where I set the background of the div. However, the color of my links is set in <code>.top-menu-navigation ul &gt; li a</code>. I was thinking I could just add <code>jQuery('.top-menu-navigation ul &gt; li a').css({'color' : '#ffffff'});</code> as a second rule in the <code>if</code> statement, but that didn't work at all. How can I combine these two events?</p> <p>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.</p> <p>For bonus points, my entire file looks like this:</p> <pre><code>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() &gt; 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 &gt; 730){ jQuery('.top-menu-navigation').css({'background-color' : '#000000'}); } else if (scroll_pos &lt; 730){ jQuery('.top-menu-navigation').css({'background-color' : '#ffffff'}); } }) }); </code></pre> <p>I'd love to combine the <code>Sticky Top Nav</code> and <code>Color Change</code> functions, is there any way that's possible? And am I calling jQuery on the right thing (<code>document</code>, <code>window</code>)?</p> <p>I'm using <code>jQuery</code> instead of <code>$</code> because I plan on making this a static landing page for a Wordpress site. </p> <p>Relevant html:</p> <pre><code> &lt;nav class="top-menu-navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Menu Item 3&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Submenu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Submenu Item 2&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Submenu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;!-- end top-menu-navigation --&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload