0

I have a div that got a 

transition:1s;

On scroll,I move the div from her actual position to the new position calculated, and thx to the transition, it's smooth. But someone request me that, the div cannot go outside the actual view.

If i scroll really fast, my div will be out of the view for a short period, and then come back.

My question is, is there a way to ignore the transition in some sort? Like, when my calculation say that the div will be outside the view, i can write the minimum top position to make her stay on the view.

Or the only solution is to remove the transition (so let's say a class 

.divTransition{
 transition:1s;
}

when i need to do that and put it back just after?

Here's a fiddle, basically I want the red cube to always stay on the view.

Here's a fiddle : https://jsfiddle.net/Crocsx/qm1gchtw/

Basically i want the red box to always stay on the view, and never go out of the "screen"

thx

Bobby
  • 4,372
  • 8
  • 47
  • 103

2 Answers2

1

Try to add id for that particular div which you don't want transition and remove that class

document.getElementById("whatever").classList.remove("divTransition");
document.getElementById("whatever").classList.add("divTransition");
Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
  • Yes, so that's the only real option? Cause I don't know i think that removing a class and adding it back all the time on scroll is a bit overkill. But if It's the only option I will do that ^^' – Bobby Aug 28 '15 at 15:12
0

You can try to tackle the problem differently, since obviously your original idea and the new requirements are clashing.

I'm suggesting making a smooth scroll on the page, and making the red div fixed - that way, everything will still seem very smooth, but the div will always stay in place. If you wish, you can still play the onload animation.

Community
  • 1
  • 1
Shomz
  • 37,421
  • 4
  • 57
  • 85