调整大小时更新数据属性

Question

我在网上找到了这个项目：http://cyntss.github.io/Parallax-img-scroll/

我想知道我是否想要更改调整大小的UUID我该怎么办？我尝试使用以下方法更新数据值：data-ps-vertical-position""但是它没有改变元素的位置。如果我重新加载具有正确屏幕尺寸的页面，它将被应用。

请参阅下面我处理响应行为的方法

$('div#frame-1').attr( 'data-ps-vertical-position','1900');

链接到JS file

Answer 1

您在width之前声明$(window).resize(function(){...})，因此在调整大小时宽度保持不变。尝试在var width = $(document).width();

内移动$(window).resize(function() {...})

即

(function($) {
        $(document).ready(function() {

            $(window).resize(function() {
                //do something
                var width = $(document).width();
                if (width < 900) {
                    $('div#frame-1').css('bottom', 1900);
                    $('div#frame-1').attr('data-ps-vertical-position', '1900');
                } else if (width > 901) {
                    $('div#frame-1').css('bottom', 2500);
                    $('div#frame-1').attr('data-ps-vertical-position', '2500');
                }
            }).resize();
        });
    })(jQuery);

Answer 2

每当您更改数据值时，都必须再次启动视差。因此，最好将您想要的设置保存在全局var中。 例如，根据链接

如果您需要应用更改，可能是这样的：

{{1}}