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!

NEO · Accepted Answer · 2013-12-27 03:32:16Z

1

use jquery scroll function

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

answered Dec 27, 2013 at 3:32

NEO

2,0118 gold badges36 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vim Bonsu Over a year ago

Doesn't work for me. Could it be because the page does not have a scroll bar?

Collectives™ on Stack Overflow

Jquery Loop function on scroll only

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related