Jquery Loop function on scroll only

Question

First, how to make this function run ONLY on scroll? Second, how to loop/repeat this function ONLY on window scroll infinitely?

  $(function(){
    $(".media-nav2").transition(
{ y: -600 }, 1500,
'cubic-bezier(.69,.19,.35,.83)');

});

I'm using the above function with this plugin https://github.com/rstacruz/jquery.transit. Here is my webiste http://dev1.envisionwebdesign.co/johnreid/campaign.html. It's a one page parallax with no scroll bars. You navigate using the top menu and mouse/touch scroll. If you check this link http://dev1.envisionwebdesign.co/johnreid/campaign.html, you can see that the div .media-nav2 immediately transitions when the page loads.

Basically I'm trying to create a parallax effect where when you scroll down to the next page/section, the div .media-nav2 scrolls up. Here's a link to the fiddle http://jsfiddle.net/newmedia85/92YgR/. I have included a link to the onepage parallax jquery for the entire site. The way the one page parallax works is making it really hard for me to solve this. Any help appreciated!

Answer 1

use jquery scroll function

    $(window).scroll(function () {
        $(".media-nav2").transition({
            y: -600
        }, 1500, 'cubic-bezier(.69,.19,.35,.83)');
    });