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.
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.