jQuery -Fadeout에서 Scroll / Fadein의 "Scrollstop"

Question

스크롤 이벤트에 의해 발사되는 DIV 포지셔닝 작업이 있습니다. 스크롤 이벤트가 여러 번 발사되어 깜박 거리는 DIV가 발생합니다. 내 계획은 더 이상 스크롤 이벤트가 발사되지 않는 즉시 Div와 사라지는 것을 사라지는 것입니다. 스크롤이 끝인지 어떻게 확인할 수 있습니까? 나는 타임 아웃 <-> 스크롤의 조합에 대해 생각했지만 실제로 내가 원하는대로 아무것도 효과가 없었습니다. 여기 내가 지금까지 얻은 것입니다.

$(document).ready(function(){

    //var animActive = false;

    $(window).scroll(function() {

        /*
        if (animActive == false){
            animActive = true;
            $('.mceExternalToolbar').fadeOut(100, function () {
                $('.mceExternalToolbar').fadeIn(3000, function () {
                    animActive = false;
                    console.log("NOW");
                });
            });
        }
        */

        topParentx = $('#tinyMCEwrapper').position().top;
        if ($(this).scrollTop() >= topParentx){
            $('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
        } else {
            $('.mceExternalToolbar').css('top', "0px");
        };
    });

});

보시다시피 나는 마지막 시도 중 하나를 남겼지 만 페이드 기능의 콜백은 예상대로 작동하지 않았습니다.

Answer 1

불행히도 스크롤 스톱의 개념은 없으므로 실제로 애니메이션을 트리거 할 수는 없습니다. 더 잘 작동하는 것은 대신 DIV의 '상단'속성을 애니메이션하여 깜박 거리는 대신 새로운 위치로 부드럽게 미끄러지도록하는 것입니다.

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        }
        $('.mceExternalToolbar').stop().animate({top, topTarget}, 500);

Answer 2

스크롤 스톱 이벤트를 만들기 위해 jQuery 특수 이벤트를 사용할 수 있습니다. James Padolsey는 위대한 글을 썼습니다 스크롤 스톱 이벤트의 예.

Answer 3

스크롤에 펄스하지 않도록 수정하십시오! 설정 타임 아웃

var animActive = false;
$(window).scroll(function(){
    if (animActive == false){
        animActive = true;
        $('#target').fadeOut(100, function () {
            var scrl = setTimeout( function(){
            animActive = false;
            $('#target').fadeIn(500);
            }, 2000);
        });
    }
});

Answer 4

내가 어제 행복했던 동안 ... 오늘 현실 뇌졸중 ... 사파리는 움직이는 div 뒤에 필요한 모든 조각을 다시 렌더링하지 않고 반응합니다. 특히 Tinymce의 iframe에 대한 것입니다. 그래서 나는 다음으로 끝났고 이것은 꽤 잘 작동합니다. 콜백이 발사 된 경우에만 Div-> 애니메이션을 배치하여 -> 페이드로 사라집니다 ..

$(document).ready(function(){

    $(window).scroll(function() {

        topParentx = $('#tinyMCEwrapper').position().top;

        var topTarget = "0px";

        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
            $('.mceExternalToolbar').animate({opacity: 0}, 1);
        }
        $('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){
            $('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing');

        });

    });

});