更改div的滚动速度? [英] changing scroll speed of divs?

问题描述

我正在尝试调整某些div的滚动速度，具体取决于另一个div(image-ul)是否完全高于网页底部.

I am trying to adjust scroll speeds of some divs depending on if an other div (image-ul) is fully above the bottom of the webpage or not.

当div"image-ul"在浏览器窗口的底部边缘上方或下方移动时，确实会更改CSS，但是在滚动或缩放窗口时滚动速度不会改变.我还希望滚动速度然后改变.

When the div "image-ul" moves above or below the bottom edge of the browser window it does change CSS, but the scroll speeds do not change upon scrolling or scaling of the window. I also want the scroll speeds to then change.

仅当(重新)加载页面时，滚动速度才会根据"image-ul"相对于浏览器窗口底部的位置而变化.

Only when (re)loading the page do the scroll speeds change according to where "image-ul" is in relation to the bottom egde of the browser window.

我做错了什么? > 请在此处查看示例.

What am I doing wrong? Please see example here.

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

So, the goal is to have different scroll speeds for divs when div "image-ul" is fully above the bowser window's bottom edge, and different scroll speeds for those divs when div "image-ul" is NOT fully above the bowser window's bottom edge.

我已经以不同的速度获得了移动元素，但是，正如我的问题所指出的，我需要根据div"image-ul"是否完全高于浏览器窗口底部的ege来改变速度.

I am already achieving moving elements at different speeds, but, as my question states, I need the speeds to change depending on if div "image-ul" is fully above the browser window's bottom egde or not.

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

推荐答案

我不确定我是否理解正确，但是当您调用内联CSS更改时，我发现您的data-scroll-speed值未得到更新.以下内容以某种"方式工作，但是我也不确定这是否正是您想要的.但这也许已经对您有所帮助:

I am not sure if I understand you right, but I found that your data-scroll-speed value does not get updated when you are calling your inline css changes. The following works in "some" way, but I am also not sure if this is exactly what you want. But maybe this already helps you out:

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

重要的是我更改了该行以获取当前值:

The important part is this line which I changed to fetch the current value:

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

原为:

var pos = scrollTop / this.speed;

这是您要找的吗?

这篇关于更改div的滚动速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！