Анимировать при прокрутке вниз и вверх

Я пытаюсь анимировать группу кнопок из относительного положения в фиксированное положение при каждой прокрутке.

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;
    }
});

Теперь кнопки просто переходят в фиксированное положение. Я понимаю, что это потому, что они не установили верхние / правые значения для начала анимации.

Я попытался преодолеть это, получив смещения кнопок и установив их как верхнее и левое значения, но это тоже не сработало.

Любые идеи?


html jquery css css-animations jquery-animate
person ChristopherStrydom    schedule 06.05.2015    source источник
comment
вы хотите фиксированное меню с 2 кнопками на нем .. или фиксированное каждую кнопку ?? .. если вы закрепите каждую кнопку, фиксированное положение сделает их друг над другом   -  person Mohamed-Yousef    schedule 07.05.2015
comment
Да, это то, чего я хочу, чтобы они перекрывали друг друга. Эффект был бы подобен кучке вещей, собранных вместе. Я намерен иметь вторую функцию, которая открывает меню со всеми ними внутри. Это просто отличный способ сделать их доступными из любого места на странице.   -  person ChristopherStrydom    schedule 07.05.2015

Ответы (2)


arrow_upward
0
arrow_downward

А как насчет функции .animate () в JQuery?

Вы можете сделать что-то вроде:

$("#myButton").animate({         
    //this value would either be how far you want it to move, 
    //or the final position; I'm not sure which.
    top: 50px; 
    left: 50px;
}, 500); //the number here is the time in ms for the animation to play.
person levelonehuman    schedule 06.05.2015
comment
Спасибо за ответ. Я верю, насколько вы хотите, чтобы он двигался. Но опять же, это относится к контейнеру ... Я думаю, это будет иметь тот же эффект, что и мой код. - person ChristopherStrydom; 07.05.2015

arrow_upward
0
arrow_downward

Я не думаю, что это хорошая идея, но в любом случае

$(window).scroll(function() {
    var menu = $(".menu"),
        scrollTop = $(window).scrollTop();
    if($('.button:nth-child(1)').css('position') !== 'fixed'){
        if(menu.offset().top <= (scrollTop + 50)) {
            $(".menu button").each(function() {
                var button = $(this);

                button.addClass("grouped");
            });
        }
    } else {
        if(scrollTop  <= 31){
            $("div.menu button").each(function() {
                $(this).removeClass("grouped");
            });
        }
    }
});

JSFIDDLE

person Mohamed-Yousef    schedule 06.05.2015
comment
Спасибо, вы видите анимацию с этим? Для меня он просто прыгает так же, как мой код. - person ChristopherStrydom; 07.05.2015