Начните анимацию, когда div достигает определенного расстояния от верхней части страницы.

Question

У меня есть меню, которое перемещается в окне при прокрутке. В настоящее время мое меню всегда остается 190px от верхней части окна. Я использую плагин размеров, и вот мой jQuery:

$(document).ready(function() {    
menuYloc = parseInt($('#mainMenu').css('top').substring(0,$('#mainMenu').css('top').indexOf('px')))
    $(window).scroll(function () {
        var offset = menuYloc+$(document).scrollTop()+'px';
        $('#mainMenu').animate({top:offset},{duration:600,queue:false});  
    });
});

Что я хотел бы сделать, так это то, что когда вы прокручиваете страницу вверх, меню находится на расстоянии 190px от вершины. Однако, когда вы начинаете прокручивать меню вниз по странице, пока она не достигнет 50px от верхней части окна, она начнет плавать, всегда оставаясь на 50px от верхней части окна, если вы не прокрутите вверх до верхней части окна. стр.

Надеюсь, что это имеет смысл, и, пожалуйста, дайте мне знать, если у вас есть решение.

Answer 1

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    if (scrollTop > startDistance - minDistance) {
        $('#mainMenu').css('top', scrollTop + minDistance);
    } else {
        $('#mainMenu').css('top', startDistance);
    }
});

Скрипка:
http://jsfiddle.net/d52wr/

Answer 2

Один из подходов заключается в изменении атрибута position и top на основе расстояния прокрутки.Этот подход позволяет браузеру обрабатывать отображение во время его цикла рендеринга во время прокрутки, что приводит к более плавным переходам по сравнению с подходом top, так как могут возникать мерцающие артефакты вследствие обработки событий.1006 * Вот jsfiddle, показывающее параллельное сравнение двух подходов: http://jsfiddle.net/nKAtB/. В некоторых браузерах при быстрой прокрутке или больших расстояниях можно наблюдать эффект мерцания, когда div располагается после каждой прокрутки.событие.

Answer 3

$(window).scroll(function() {
    $('#animatedElement').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideUp");
        }
    });
});

Замените #animatedElement на идентификатор или класс элемента, который вы хотите анимировать.Замените slideUp классом анимации.400 представляет пространство между элементом и верхней частью экрана.Анимация активируется, когда элемент находится в 400 пикселей от верхней части экрана.Увеличьте это число, чтобы анимация активировалась раньше.

Answer 4

Хорошо, спасибо @twsansbury и @andy. Похоже, я понял это с вашими толчками в правильном направлении.

Вот что я закончил:

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    var newDistance = (scrollTop + minDistance);
    if (scrollTop > startDistance - minDistance) {
        $('#mainMenu').animate({top:newDistance},{duration:600,queue:false});
    } else {
        $('#mainMenu').animate({top:startDistance},{duration:600,queue:false});
    }
});

А вот jsfiddle, который показывает сравнение между тремя решениями: http://jsfiddle.net/cpL69/

Еще раз спасибо за помощь:)