Overflow from off-canvas menu conflicts with parallax

Question

I'm building this website and I'm facing a very strange problem. For 2 sections in the site i'm using parallax for background pics. It's working if I don't set an overflow rule but It's not working if I'll add. The overflow properties are essential for the off-canvas menu to work properly. I took the code for the off-canvas menu from here .

The elements with the conflict with the overflow are .container and .content-wrap .

html, 
body, 
.container, 
.content-wrap {
  overflow:hidden;
  width: 100%;
  height: 100%;
}
.content-wrap {
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
}

The code for the parallax is

;(function($) {
    $window = $(window);

    $('*[data-type="parallax"]').each(function(){

        var $bgobj = $(this);

        $(window).scroll(function() {

            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            var coords = '50% '+ yPos + 'px';

            $bgobj.css({ backgroundPosition: coords });

        });
    });
})(jQuery);

All the js code is in the file main.js . I tried to play with the values of overflow by removing them and add them elsewhere or wrap all the content in a new element but with no luck.

Answer 1

The problem is that you are registering the scroll action to the wrong element. What scrolls in this case (after you add your overflow settings) is your content-wrap div, not the browser window. This should work:

$(".content-wrap").scroll(function() {
    $('*[data-type="parallax"]').each(function(){
        var $bgobj = $(this);      

        var yPos = -($(".content-wrap").scrollTop() / $bgobj.data('speed'));
        var coords = '50% '+ yPos + 'px';

        $bgobj.css({ backgroundPosition: coords });
    });
});