I'm new at Javascript and I'm working on a site that has a full width slider and a set of buttons below the slider that are partially visible depending on the screen size. I set a transform:translate css on the buttons so when you hover over the visible part of each button it will transform upward to reveal the rest of the button. But this is only necessary if the full button is not visible on the screen. Once you scroll down the page and reveal the entire buttons_container div, the transform css needs to be disabled.
Is there a way to disable this transform css once the buttons come in full view when you scroll down? And can we base it on the screen/window size to that it works in mobile/tablet devices?
Here's what I have so far:
<div id="slider"></div>
<div id="button_container">
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
<div class="buttons">
<a href="#"><p>Button Title</p></a>
<div class="button_img">
<a href="#"><img src="image.jpg" /></a>
</div>
</div>
</div>
Here's the css
.hp_buttons {
float:left;
width:33%;
transform:translate(0,0);
-webkit-transition: all.2s ease-in-out;
-moz-transition: all.2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.hp_buttons:hover {
transform:translate(0,-80%);
}
Thanks in advance.