title: JQuery/CSS Events/Animations for one page bootstrap design. (on Click & On scroll)
body: <p>Im interested in creating animations as the user either clicks or scrolls through my page. <strong>(its important that animations trigger on both clicking the links in the navigation and scrolling)</strong> I am currently using a bootstrap bare bones template (one page scroll). 
  I have included the Javascript that was initially in the files for the on click scroll event.</p>
  
  <pre><code>$(function() {
  $('.page-scroll a').bind('click', function(event) {
      var $anchor = $(this);
      $('html, body').stop().animate({
          scrollTop: $($anchor.attr('href')).offset().top
      }, 1500, 'easeInOutExpo');
      event.preventDefault();
  });
  });
  </code></pre>
  
  <p>Any help would be appreciated as Im pretty much lost when it comes to this! I managed to create an on load fade in effect in pure CSS on the landing page. I would love to continue to use pure CSS throughout if possible. </p>
  
  <p>I have managed to create a fade in effect on the about page using the javascript below the problem is that when i click the about link again the text disappears. I would like for the text to remain after the user clicks the about link and is taken to that section of the page.</p>
  
  <pre><code>$(function() {  
  $("#btn").click(function() {  
  $(".box2").toggleClass("box2-change");  
  
  });  
  
  });  
  </code></pre>
  
  <p>For further reference here is the download/demo for the template Im using.
  <a href="http://startbootstrap.com/scrolling-nav" rel="nofollow">http://startbootstrap.com/scrolling-nav</a></p>