视差滚动中的实时调整大小

Question

I was using the stellar.js in my project.
There is a question - under the "realtime resize" requirement( do not reload page ). when I using the resize function to calculate the new position LEFT in horizontal scrolling below:

$(window).resize(function(){
    var newPos = element.position().left*100; //Get NEW Position ...
    element.css("left", newPos);        //It's not working ...
});

the elements with "data-stellar-ratio" will not be overwrite.
How do i do to slove this problem ?

Thanks for your help.

Under the requirement below
-> When resizing browser then recalculate the element position in real-time ( NO Reload page )
-> So, I will recalculate position and overwrite new position to element.
-> But, the element which use data-stellar-ratio attribute can not be overwrite new position .(example in comment)
here is my problem. thank you for your help again.

Answer 1

Your question is very unclear. But, if you wish to change the data-stellar-ratio attribute, you would do it like this.

element.attr('data-stellar-ratio', 2);

element must be a jQuery object.

Answer 2

To you refer

_repositionElements: function() in stellar.js

if (this.options.horizontalScrolling) {
 var bSize = this.options.refWidth,bResize = $(window).width(),bRatio = this.options.formula(bResize, bSize);

newPositionLeft = (scrollLeft + particle.horizontalOffset + this.viewportOffsetLeft + particle.startingPositionLeft - particle.startingOffsetLeft + particle.parentOffsetLeft) * -(particle.stellarRatio + fixedRatioOffset - 1) + particle.startingPositionLeft; 

newPositionLeft *= bRatio;   //all element reposition in here

newOffsetLeft = newPositionLeft - particle.startingPositionLeft + particle.startingOffsetLeft;

}

bSize = resizing browser before
bResize = resizing browser after
bRatio = resize ratio
newPositionLfet = all element position left

newPositionTop = the same to newPositionLeft