title: WordPress load script only on homepage, else add class
body: <p>Not really sure how to achieve what I am trying to do here, hopefully you guys can help.
  I have a script within my function.js file which makes my fixed header fade into view when the page is scrolled down to a certain point.</p>
  
  <p>I want this script to work as it is on the home page, but I'd like to have the header permanently visible on all interior pages.</p>
  
  <p>i'm sure this will require breaking this script out into it's own file and changing it around a bit, but I'm open to suggestion.</p>
  
  <p>My initial thoughts are to have the script run as intended on the homepage, but create some sort of else/if php statement that says: </p>
  
  <p>"if this is the home page, do nothing, else, add a class of opaque to the element #navbar"</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="navbar" class="navbar bg transition"&gt;
          &lt;div class="row"&gt;
              &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/images/logo-small.png" alt="Jot logo" class="navlogo"&gt;
              &lt;nav id="site-navigation" class="navigation main-navigation" role="navigation"&gt;
                  &lt;div class="menu" id="mobilemenu"&gt;
                    &lt;span class="menu-global menu-top"&gt;&lt;/span&gt;
                    &lt;span class="menu-global menu-middle"&gt;&lt;/span&gt;
                    &lt;span class="menu-global menu-bottom"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;div id="menuexpand"&gt;
                  &lt;div&gt;
                      &lt;?php wp_nav_menu( array( 'theme_location' =&gt; 'primary', 'menu_class' =&gt; 'nav-menu' ) ); ?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/nav&gt;&lt;!-- #site-navigation --&gt;
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- #navbar --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bg {
    background: #525454;
    opacity: 0;
  }
  
  .show {
    opacity: 1;
  }
  
  .transition {    
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  
  .navbar {
    background: none;
    position: fixed;
    z-index: 999;
    padding-top: 15px;
    top: 0;
    opacity:0.3;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(window).scroll(function() {
    // 100 = The point you would like to fade the nav in.
  
      if ($(window).scrollTop() &gt; 100 ){
  
        $('.bg').addClass('show');
  
      } else {
  
        $('.bg').removeClass('show');
  
      };    
    });
  
    $('.scroll').on('click', function(e){   
        e.preventDefault()
  
      $('html, body').animate({
          scrollTop : $(this.hash).offset().top
        }, 1500);
    });
  </code></pre>
  
  <p>Any ideas here? Like I said, I am open to suggestion.</p>