I am currently working on a website project and have encountered a peculiar issue. I am using parallax for background images in two sections of the site. The parallax effect works fine without setting an overflow rule, but when I add it, the parallax effect stops working. The overflow properties are necessary for the off-canvas menu to function properly. I implemented the off-canvas menu code from this source.
The conflicting elements 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 effect is as follows:
;(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 JavaScript code is located in the file main.js. I have tried adjusting the values of overflow by removing and adding them elsewhere, or wrapping all the content in a new element, but have not been successful in resolving the issue.