[英]Overflow from off-canvas menu conflicts with parallax
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. 对于网站的2个部分,我使用视差作为背景图片。 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 . 与溢出冲突的元素是.container和.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 . 所有的js代码都在文件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. 我试图通过将它们删除并将它们添加到其他地方来处理溢出的值,或者将所有内容包装在一个新元素中,但是没有运气。
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. 在这种情况下(添加溢出设置之后)滚动的是内容包装div,而不是浏览器窗口。 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 });
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.