Question

我正在使用下面的代码来更改某些元素的滚动速度。我从HERE复制的代码。

要仔细检查我的整体代码，我还在＆＃34; .slogan-a-line＆＃34;中添加了颜色更改。

if / else取决于＆＃34;＃image-ul＆＃34;完全位于浏览器窗口的下边缘。

我的问题是 - 当调整浏览器窗口大小或滚动时 - ＆＃34; .slogan-a-line＆＃34;确实会改变，但其他元素的数据滚动速度却没有。当（重新）加载它们时。

最初，首次加载网页时，代码会设置正确的数据滚动速度。但是在调整浏览器窗口大小时 - 改变是否＆＃34;＃image-ul＆＃34;完全高于浏览器窗口的底部边缘 - 数据滚动速度不会改变，直到刷新网页（因此id和类名称正确）。

我需要更改数据滚动速度而无需刷新浏览器窗口。谁能看到我做错了什么？

{{1}}

Answer 1

查看答案EXAMPLE HERE！

    //
// default speed ist the lowest valid scroll speed.
//
var default_speed = 1;
//
// speed increments defines the increase/decrease of the acceleration
// between current scroll speed and data-scroll-speed
//
var speed_increment = 0.01;
//
// maximum scroll speed of the elements
//
var data_scroll_speed_a = 4; // #sloganenglish
var data_scroll_speed_b = 5; // .slogan-a-line
//
//
//
var increase_speed, decrease_speed, target_speed, current_speed, speed_increments;
$(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', data_scroll_speed_a).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_a * speed_increment);
             $('.slogan-a-line').attr('data-scroll-speed', data_scroll_speed_b).attr('data-current-scroll-speed', default_speed).attr('data-speed-increments', data_scroll_speed_b * speed_increment);
             $('.slogan-a-line').css('color', 'yellow');
             increase_speed = true;
             decrease_speed = false;
         } else {
             $('#sloganenglish').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
             $('.slogan-a-line').attr('data-scroll-speed', '1').attr('data-current-scroll-speed', default_speed);
             $('.slogan-a-line').css('color', 'red');
             decrease_speed = true;
             increase_speed = false;
         }
     }).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'));
     this.current_speed = 1.0;
 };

 moveItItem.prototype.update = function(scrollTop) {

     target_speed = parseInt(this.el.attr('data-scroll-speed'));
     current_speed = this.current_speed;
     speed_increments = parseFloat(this.el.attr('data-speed-increments'));

     if(increase_speed){
         if(current_speed < target_speed){
              current_speed += speed_increments;
         } else {
            current_speed = target_speed;
         }
     } else if(decrease_speed){
         if(current_speed > default_speed){
            current_speed -= speed_increments;
         }
         if($(window).scrollTop() === 0){
            current_speed = default_speed;
         }
     }
     this.current_speed = current_speed;
     var pos = scrollTop / this.current_speed;
     this.el.css('transform', 'translateY(' + -pos + 'px)');
 };

 // Initialization
 $(function() {
     $('[data-scroll-speed]').moveIt();
 });

使用jQuery更改数据滚动速度？

1 个答案: