改变div的滚动速度？

我正在尝试调整某些div的滚动速度，具体取决于其他div（image-ul）是否完全位于网页底部之上。

当div“image-ul”在浏览器窗口的下边缘上方或下方移动时，它确实会改变CSS，但滚动或缩放窗口时滚动速度不会改变。 我还希望滚动速度能够改变。

仅当（重新）加载页面时，滚动速度根据“image-ul”相对于浏览器窗口的底部egde的位置而改变。

我究竟做错了什么？ 请看这里的例子。

因此，当div“image-ul”完全位于bowser窗口的下边缘时，目标是为div提供不同的滚动速度，当div“image-ul”未完全位于bowser窗口的底部时，这些div的滚动速度不同边缘。

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

// 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更改时，你的数据滚动速度值不会更新。 以下以“某种”方式工作，但我也不确定这是否正是您想要的。 但也许这已经帮助你了：

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

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

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

原来是：

 var pos = scrollTop / this.speed; 

这是你在寻找什么？

Answer 2

你的意思是实现类似于垂直视差场景的东西，其中元素以不同的速度移动？

也许有些搜索“垂直视差”并看一些例子。

例如： http ： //ianlunn.co.uk/demos/jquery-vertical-parallax-background/