0

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.

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.

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.

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.

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();
 });
Eddy
  • 566
  • 2
  • 8
  • 28
  • I find it rather hard to understand what the goal here is... – Rumplin Jun 01 '17 at 10:46
  • Thanks, @Rumplin! 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 when div "image-ul" is NOT fully above the bowser window's bottom edge. – Eddy Jun 01 '17 at 10:57
  • Why do you need scroll speeds if you just want your "image-ul" to be above the bottom of the browser? You can do this with CSS with fixed position and no need to do magic with Javascript here. – Rumplin Jun 01 '17 at 11:00
  • "image-ul" can be fully above the bottom egde of the browser window., or not! Dependent on this I need different scroll speeds for the other divs. – Eddy Jun 01 '17 at 11:02
  • If you scale the browser window down "image-ul" is not fully above the bottom edge of the browser window anymore, and then the scroll speeds need to be different for the other divs. – Eddy Jun 01 '17 at 11:04
  • As you will see the color of the text does change when you scale the window down and scroll. So this does work, but not the scroll speeds. – Eddy Jun 01 '17 at 11:06
  • I would suggest you read this answer (https://stackoverflow.com/questions/7408100/can-i-change-the-scroll-speed-using-css-or-jquery). I too think this is a bad idea from a user perspective. – Rumplin Jun 01 '17 at 11:08
  • Please show me a webpage, where a slogan hovering over web content is a good idea. And to end this debate, I can't help you with this. – Rumplin Jun 01 '17 at 11:18

2 Answers2

1

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'));

Original was:

var pos = scrollTop / this.speed;

Is this what you were looking for?

hallleron
  • 1,972
  • 3
  • 13
  • 18
  • So as long as the window is smaller then your image-ul box and the font is red, the scroll speed is equal to 1. But as soon as the font gets yellow, the scroll speeds change to 4 and 5 accordingly. – hallleron Jun 06 '17 at 13:46
  • Thank you, @halleron! Yes, your understanding of what I want to happen is correct. However, your code solves the speeds issue, but when my image-ul box moves fully above the bottom edge of the browser the elements that change scroll speed also make a jump in position. I would like them to change scroll speed starting from their current position. – Eddy Jun 06 '17 at 14:05
  • So as the browser window is scrolled, image-ul moves fully above the bottom edge of the browser window and with your code the scroll speeds then change as I want them to, thank you. But I don't want the elements that change scroll speed to make a sudden jump in position. They need to change scroll speed from where they are at the moment when scroll speeds change. – Eddy Jun 06 '17 at 14:19
  • They need to change scroll speed at the position where they are at the moment when scroll speeds change, not take on another position. – Eddy Jun 06 '17 at 14:37
  • Yeah I get what you mean, I try to figure out a solution as soon as I can (maybe tonight). I know where the issue is at least. – hallleron Jun 06 '17 at 14:42
  • So, I guess I got it. To be honest I didn't have much time, but it is working I guess. But I would definitely modify the code for a cleaner and more elegant version. But it should help you get going :-). The key here is "transistion". The jump of your elements happened because the multiplier suddenly changed from 1 to 4 or 5. I created a variable at the top where you can set a transition speed. This value defines an increase/decrease in scroll speed over time to smoothen the animation. I hope you get what I mean. So, sorry for the messy code, but here you go: https://jsfiddle.net/wyx3o6uy/43/ – hallleron Jun 06 '17 at 18:47
  • And in general, there is a much cleaner way to achieve this. You should compare your scrollTop values when they get updated with the last one. If it increases, use my logic with the transition. If it decreases, do the same with decreasing the value. With this technique you can get rid of your prototype functions and write much shorter code. If I have time again I'll try to give you an example. Have a nice evening – hallleron Jun 06 '17 at 19:06
  • Thanks you so much, @hallleron!!!. It took me some some to analyze/realize what is going on. There is still a "bug" I think. Let me try to explain. When I scroll, the purple rectangle and the "LINE" text move at the same speed as image-ul. Till image-ul passes fully above the bottom of the browser window, then the purple rectangle and "LINE" slow down in scrolling, but at the same speed as each other. They don't actually differ in speed till "LINE" passes the bottom of the browser window. Hallleron, you'll need to resize your browser window correctly to see this happening. Hope I am clear. – Eddy Jun 07 '17 at 07:23
  • Really appreciate your efforts, @hallleron. Seems you're close now :) – Eddy Jun 07 '17 at 07:24
  • 1
    Hey, thanks for your information. Well I guess it is fixed now: https://jsfiddle.net/wyx3o6uy/45/. You now set the max scroll speed for the elements in the configuration section at the top. The rest gets calculated dynamically. Is this what you are looking for? They now operate completely independent. – hallleron Jun 07 '17 at 07:43
  • When I just looked again, it seems the purple triangle and "LINE" only start to differ in slowed scroll speed when they are both fully under the "image-ul". Till then they have slowed, but at the same speed as each other. – Eddy Jun 07 '17 at 07:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146031/discussion-between-hallleron-and-eddy). – hallleron Jun 07 '17 at 07:45
  • My last comment was meant for prior to your last comment. It seems you've got it!! :) Still need to test it in the site itself but looks good!! So already awarded the bounty to this answer. You mentioned cleaner code? If you have time for this at any moment, please :) – Eddy Jun 07 '17 at 07:51
  • I am glad I could help =) – hallleron Jun 07 '17 at 07:55
  • 1
    You mentioned cleaner code? If you have time for this at any moment, please :) – Eddy Jun 07 '17 at 07:56
  • Reaal thankful for your help on this, @hallleron! Have a good day! – Eddy Jun 07 '17 at 07:57
  • Hi, hallleron, did you see my messages in the chat? – Eddy Jun 09 '17 at 08:20
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146233/discussion-between-hallleron-and-eddy). – hallleron Jun 09 '17 at 08:22
  • Hi halleron, could you please look at christophers answer here: https://stackoverflow.com/questions/44508029/slow-scroll-jittery/44508294?noredirect=1#comment76010011_44508294 I don't know how to recode. Could you help please? – Eddy Jun 12 '17 at 20:57
  • Hi Hallleron, are you seeing my messages above and in the chats? http://chat.stackoverflow.com/rooms/146031/discussion-between-hallleron-and-eddy and http://chat.stackoverflow.com/rooms/146233/discussion-between-hallleron-and-eddy Could use some help, please! – Eddy Jun 15 '17 at 07:48
0

Do you mean implementing something similar to a vertical parallax scenario, where elements move at difference speeds?

Maybe so some searches for "Vertical Parallax" and have a look at some examples.

e.g.: http://ianlunn.co.uk/demos/jquery-vertical-parallax-background/

Mark Redman
  • 24,079
  • 20
  • 92
  • 147
  • I am already achieving moving elements at different speeds, but, as my question states, I need the speeds to change depending on if a div is fully above the bottom browser window egde or not. – Eddy Jun 04 '17 at 11:07