1

I have the following div with the following css

.bottom {
    position: fixed;
    width: 100%;
    background-color: #e8ebed;
    z-index: 600;
    overflow: auto;
    height: 100vh;
    transform: translateY(100vh);
    min-width: 1024px;
    transition: transform 0.5s ease-in;
}

<div class="bottom"></div>

When the user clicks a button, I add the following class to the div:

.stuck{
    transform: translateY(0px);
}

I am expecting the div to transition upwards, but that is not happening. How can I get it to translate itself to the top of the screen using transform? Also, I need to translate it down afterwards at the same speed.

I add the stuck class to the div by doing:

$('.bottom').addClass('stuck');
J K
  • 4,883
  • 6
  • 15
  • 24
  • Show us the code you use to apply the stuck class to the div. – Timothy Kanski Apr 27 '16 at 23:47
  • done. see edited answer – J K Apr 27 '16 at 23:48
  • Verify that your class is being applied correctly by opening developer panel while on the page. (F12 in browser) If the class is there, see the following link. I think it might have to do with your position:fixed: http://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform – Timothy Kanski Apr 27 '16 at 23:54
  • _"but that is not happening."_ `css` and `js` at Question appear to return expected results. Can you create a stacksnippets to demonstrate `transition` not being applied? – guest271314 Apr 28 '16 at 00:06
  • Yeah from what I can see this should work, Either you have a js problem OR you have styles overiding it. – Michael Mano Apr 28 '16 at 00:09

0 Answers0