Trying to animate a set of buttons from a relative position to a fixed position on each scroll by.
HTML
<div class="menu">
<button class="button"></button>
<button class="button"></button>
</div>
CSS
.button {
display: inline-block;
position: relative;
margin: 3px;
height: 56px;
width: 56px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grouped {
z-index: 1000;
position: fixed;
top: 31px;
right: 20px;
}
JS
var scrollFlag = false;
$(window).scroll(function() {
var menu = $(".menu"),
scrollTop = window.scrollTop;
if(menu.offset().top <= (scrollTop + 50)) {
if(scrollFlag == false) {
$(".menu button").each(function() {
var button = $(this);
button.addClass("grouped");
});
scrollFlag = true;
}
} else {
$("#intro div.menu button").each(function() {
$(this).removeClass("grouped");
});
scrollFlag = false;
}
});
The current issue is that the buttons simply snap to the fixed position instead of animating smoothly. It seems that they need predefined top/right values for the animation to work properly.
I attempted to fix this by setting the buttons' offsets as their top and left values, but unfortunately, this did not produce the desired result.
Any suggestions?