Question

我正在构建this website，我面临着一个非常奇怪的问题。对于网站中的2个部分，我使用视差作为背景图片。如果我没有设置溢出规则，它会正常工作，但如果我添加，它就无法正常工作。溢出属性对于非画布菜单正常工作至关重要。我拍摄了非画布菜单from here的代码。

与溢出冲突的元素是 .container 和 .content-wrap 。

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

视差的代码是

;(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);

所有js代码都在 main.js 文件中。我尝试使用溢出的值来删除它们并将它们添加到别处或将所有内容包装在新元素中但没有运气。

Answer 1

问题是您正在将滚动操作注册到错误的元素。在这种情况下滚动（在添加溢出设置之后）是内容包装div，而不是浏览器窗口。这应该有效：

$(".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 });
    });
});

非画布菜单的溢出与视差冲突

1 个答案: