如何解决如何独立于屏幕尺寸,在相同位置保持更快的滚动div?
为了使不同的data-scroll-speed属性具有不同的滚动速度,我使用了以下js:
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}
}
var moveItItem = function(el){
this.el = $(el);
this.speed = this.el.attr('data-scroll-speed');
};
moveItItem.prototype.update = function(scrollTop){
var pos = scrollTop / this.speed;
this.el.css('transform','translateY(' + -pos + 'px)');
};
$(function(){
$('[data-scroll-speed]').moveIt();
});
我的问题是,如果我调整浏览器窗口的大小,图像的垂直位置(我使用此js,而主要内容却具有默认速度)会发生变化,即图像出现在主窗口的不同区域内容;如何使它们保持独立于屏幕尺寸的准确位置?
主要内容已经完全响应(字体大小在vw中指定,更快的滚动图像根据屏幕宽度调整大小,等等。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。