jQueryでデータスクロール速度を変更しますか？

Question

私は以下のコードを使用して、特定の要素のスクロール速度を変更しています。コードHEREからコピーしました。

私の全体的なコードを再確認するには、 ".slogan-a-line"に色の変更を加えました。

if/elseは、「＃image-ul」がブラウザウィンドウの下端よりも上にあるかどうかによって異なります。

私の問題は、ブラウザウィンドウのサイズを変更したりスクロールしたりするとき、「.slogan-a-line」の色が変わるが、他の要素のデータスクロール速度は変わらないということです。彼らが（再）積み込みをするとき。

最初にウェブページを読み込んだとき、正しいデータスクロール速度がコードによって設定されます。しかし、ブラウザウィンドウのサイズを変更すると、 "＃image-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> 

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(); 
});