0

To float a <div> when start scroll down and should stop when the <div> touches footer and vice versa when scroll up. I'm able to do it by adding this code:

if (window_top== div_top){
    $arrow.css({position:'fixed',bottom:0,top:"auto"});
}

On this link but my problem is I'm getting shaking effect. How can I stop this shaking effect and do scroll up and down smoothly?

George
  • 36,413
  • 9
  • 66
  • 103
user3045602
  • 1
  • 1
  • Seriously, what's the aim of doing that ? look http://jsfiddle.net/be2Ff/14/. Same result without JS and same amount of css – TCHdvlp Nov 28 '13 at 14:02
  • Hi TCHdvlp, thanks for ur respond, Sorry i did a mistake on the code,check this new code on: http://jsfiddle.net/be2Ff/15/. shaking effect will visible here. I want to stop this shaking effect and do scroll up and down smoothly? – user3045602 Nov 29 '13 at 05:27
  • My am is: i am trying to float a div from a position when scroll down(position of this div is fixed) to a certain position(such as, till on top of my footer) vertically and want to do vice versa when i did scroll up. i google it some how and found this jsfiddle's code and i did some modification as per my requirement but the shaking effect kill me. – user3045602 Nov 29 '13 at 06:02

1 Answers1

0

Ok, here is what you need to do. First of all, The shaking behaviour is totally normal looking to your code, because !!! when you scroll, the test if (window_top > div_top) is based on old positions. Before moving your arrow. when your arrow is under the footer, you set it the way that window_top == div_top will be true for the next scroll. Next scroll, window_top == div_top will be true, so you move your arrow... etc... Anyway, what you need to do is :

1 : save initial arrow top position in a global var

var initialH = $('#arrow').offset().top;

2 : distinct up scroll and down scroll

How can I determine the direction of a jQuery scroll event?

3 : while scrolls are down, just check for 

if (window_top > div_top)

if true, then you can replace fixed by absolute and attach the arrow to the footer.

4 : if the scroll is up :

if arrow_top < ( arrow_initial_height + $(window).scrollTop() ), you musn't do anything, else, set back the original top offset to your arrow, so it will takes back is original position. You will get rid of the shaking effect.

For the smooth scroll, I'm sure there is a ton of tutorials that explain how to do it.

working fiddle : http://jsfiddle.net/be2Ff/30/

Community
  • 1
  • 1
TCHdvlp
  • 1,334
  • 1
  • 9
  • 15
  • Hi TCHdvlp, There is no shaking effect anymore..thanks again. i followed all your 4 steps but have doubt on steps 2. pls check this link: http://jsfiddle.net/be2Ff/28/ ......what i want now is when scroll down the arrow should stay at original position when the arrow reaches its original position, not to always stick on yellow footer.....scroll up attached with the arrow when scroll down detached ...like this.. – user3045602 Nov 29 '13 at 12:33
  • My bad. I'll edit my answer. Step 4 must be : if scroll up... So, if scroll up, when `window_top > footer_top` go back to fixed position. – TCHdvlp Nov 29 '13 at 13:27
  • There are others mistakes, I'll edit the fiddle. look for the fiddle in the answer – TCHdvlp Nov 29 '13 at 13:34
  • Ok...Hi TCHdvlp, Thanks a llloooooootsssss...This is what i want....and i respect your valuable time that you spent on this to solved my problem...i refer your working fiddle...have a great day – user3045602 Nov 30 '13 at 07:05