3

I am new, please be gentle. I've reviewed these posts on using the jquery .scroll() event, but haven't had luck implementing a working fix. 

http://stackoverflow.com/questions/5686629/jquery-window-scroll-event-does-not-fire-up
http://stackoverflow.com/questions/19375636/jquery-onscroll-not-firing-the-event-while-scrolling

I am working on a site that uses Jquery Mobile. I've included a small script to produce a parallax effect on background images when the user vertically scrolls the page. It is written as such:

$(window).on('scroll', function(){
    $('.slider').each(function(r){
        var pos = $(this).offset().top;
        var scrolled = $(window).scrollTop();
        $('.slider').css('background-position-y', -(scrolled * 0.3) + 'px');
    });
});

This code works wonderfully when I enter it in the console after the page has loaded. It does nothing when loaded as part of my custom script. It is located at the end of my main.js file which is the last .js referenced in my HTML, immediately after the JQM CDN distribution link.

    ...</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='js/buildpage.js'></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src='js/main.js'></script>
</html>

I've tried a $(windows).scroll(function(){alert('scroll')}) in lieu of my parallax script, which results in a single alert as the page is resized when JQM initializes and modifies the layout, then nothing further. Re-entering the line in the console after page load results in alerts when the window is scrolled.

If I comment out the JQM link, the parallax script works just fine.

In summary: Parallax script is dependant on .scroll().

Parallax script is the last line in the last .js referenced in the HTML.

Parallax script does not work if loaded inline with the referenced scripts.

Parallax script works fine if entered in the dev console after the page has loaded (Chrome).

Disabling JQM results in the desired effect... but now JQM is off! :(

Thank you in advance for your guidance and sagely wisdom.

Daniel J Chow
  • 31
  • 1
  • 3
  • After hours of head scratching, went home to make up a test page and found that for some reason, the effect was working as intended.... HOWEVER I did find that after switching page views the effect stopped working again until reload. – Daniel J Chow Sep 03 '14 at 00:32
  • Somehow this JSFiddle works fine, but my local version does not. I lose. Thanks for watching.. http://jsfiddle.net/m17aqe6j/ – Daniel J Chow Sep 03 '14 at 00:45
  • Here's a copy of my local version. Parallax breaks after switch to page 2 and back to page 1. I've commented out anything that didn't go into the jsfiddler, so not sure why the results would be different? http://new.seianesthesia.com/test.html – Daniel J Chow Sep 03 '14 at 01:18
  • I've since discovered that this solution for parallax does not work with iOS devices because script execution is halted during scroll. I am rewriting the site to use skrollr.js instead. – Daniel J Chow Sep 05 '14 at 16:33

1 Answers1

3

I had a similar problem after upgrading from JQM 1.3 to 1.4. What solved it for me was using either scrollstart or scrollstop instead of scroll event (see http://api.jquerymobile.com/category/events/) and attaching it to document instead of window. So 

$(document).on('scrollstart', function(){     //or 'scrollstop'
    console.log("I'm scrolling!");
    //your code here
});
margold
  • 587
  • 2
  • 5
  • 16
  • Thank you very much! This fixed my problem - jQuery Mobile made the scroll event not work on `window` after going back in history. – EpicPandaForce Jan 22 '15 at 11:22