0
我使用下面的代码来改变某些元素的滚动速度。我从HERE复制的代码。使用jQuery更改数据滚动速度?
要仔细检查我的整体的代码,我还增加了一个颜色变化来“.slogan-A线”。
的如果/其他取决于如果“#图像-UL”是充分上述浏览器窗口的底部边缘。
我的问题是,当调整窗口大小或滚动浏览器窗口时,“.slogan-a-line”的颜色确实会改变,但其他元素的数据滚动速度不会。他们在什么时候(重新)加载。
最初,当第一加载网页时,正确的数据滚动速度是由码集。但调整浏览器窗口时 - 要改变“#图像-UL”是否完全上面的浏览器窗口的底部边缘或不可─数据滚动的速度不会改变,直到我刷新网页(所以id和类名正确)。
我所需要的数据滚动速度来改变,而无需刷新浏览器窗口。任何人都可以看到我做错了什么?
<script>
// Assign attribute specific "data-scroll-speed" to elements upon loading, resizing and scrolling of the webpage page. "if/else" is depending on if #image-ul is fully above the bottom edge of the browser window.
$(document).ready(function() {
$(window).on('load resize scroll', function() {
var WindowScrollTop = $(this).scrollTop(),
Div_one_top = $('#image-ul').offset().top,
Div_one_height = $('#image-ul').outerHeight(true),
Window_height = $(this).outerHeight(true);
if (WindowScrollTop + Window_height >= (Div_one_top + Div_one_height)) {
$('#sloganenglish').attr('data-scroll-speed', '2');
$('.slow-scroll-slider').attr('data-scroll-speed', '5');
$('.slogan-a-line').css('color', 'green');
} else {
$('#sloganenglish').attr('data-scroll-speed', '1');
$('.slow-scroll-slider').attr('data-scroll-speed', '1');
$('.slogan-a-line').css('color', 'red');
}
}).scroll();
});
// data-scroll-speed script
$.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 = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
var pos = scrollTop/this.speed;
this.el.css('transform', 'translateY(' + -pos + 'px)');
};
// Initialization
$(function() {
$('[data-scroll-speed]').moveIt();
});
</script>
谁能帮助吗? – Eddy