jquery - 改变div的滚动速度？

Question

我正在尝试根据其他 div (image-ul) 是否完全位于网页底部之上来调整某些 div 的滚动速度。

当 div“image-ul”移动到浏览器窗口底部边缘的上方或下方时，它确实会更改 CSS，但滚动速度不会随着窗口的滚动或缩放而改变。我还希望滚动速度随之改变。

只有当(重新)加载页面时，滚动速度才会根据“image-ul”相对于浏览器窗口底部边缘的位置发生变化。

我做错了什么？ Please see example here.

因此，目标是当 div“image-ul”完全位于 bowser 窗口底部边缘之上时，div 具有不同的滚动速度，而当 div“image-ul”未完全位于 bowser 窗口的底部边缘之上时，这些 div 具有不同的滚动速度Bowser 窗口的底部边缘。

我已经实现了以不同速度移动元素，但是，正如我的问题所述，我需要根据 div“image-ul”是否完全位于浏览器窗口的底部边缘之上来改变速度。

    // 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', '4');
             $('.slogan-a-line').attr('data-scroll-speed', '5');
             $('.slogan-a-line').css('color', 'yellow');
         } else {
             $('#sloganenglish').attr('data-scroll-speed', '1');
             $('.slogan-a-line').attr('data-scroll-speed', '1');
             $('.slogan-a-line').css('color', 'red');
         }
     }).scroll();
 });

Answer 1

我不确定我是否理解正确，但我发现当您调用内联 css 更改时，您的 data-scroll-speed 值不会更新。以下以“某种”方式工作，但我也不确定这是否正是您想要的。但也许这已经可以帮助您:

https://jsfiddle.net/wyx3o6uy/40/

重要的部分是我更改为获取当前值的这一行:

var pos = scrollTop / parseInt(this.el.attr('data-scroll-speed'));

原文是:

var pos = scrollTop / this.speed;

这就是您要找的吗？