JQuery / CSS Events / Animations to design a single boot page. (in Click & On scroll mode)

Question

I'm interested in creating animations, as the user either clicks or scrolls my page. (It is important that the animation starts when you click on the links in the navigation and scroll) . I am currently using a bootstrap boot template (one page scroll). I included Javascript, which was originally in the files for the click-through scroll event.

$(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();
});
});

Any help would be appreciated as Im very much lost when it comes to this! I managed to create a slimming effect that works in pure CSS on the landing page. I would like to continue to use pure CSS, if possible.

I managed to create a fade in effect on the about page using javascript, below the problem is that when I click on the link again, the text disappears. I would like the text to remain after the user clicked a link about it and got into this section of the page.

$(function() {  
$("#btn").click(function() {  
$(".box2").toggleClass("box2-change");  

});  

});  

For future reference, here is the download / demo of the Im template using. http://startbootstrap.com/scrolling-nav

Answer 1

// inside the document is ready

$("#yourElement").on('click', doStuff);
$("#yourElement").on('scroll', doStuff);

// later in the .js file

function doStuff()
{
  // triggers both the click and scroll event

}