限制jQuery ui只能在给定区域内向上拖动

我有一个固定位置的图像，我用CSS制作动画，当用户滚动时沿着屏幕边缘移动。-效果很好

当图像到达屏幕底部时，用户可以单击它，并将其动画返回顶部。-工作也很好

我还尝试允许用户使用-这里出现了复杂情况

我只需要将图像向上拖动，而不需要向下拖动，因此我限制了我的可拖动元素仅向上拖动，方法是将其包含包装器与可拖动图像一起移动。我还将完全限制页面顶部的拖动，以防止图像被拖动到页面顶部之外

在大多数情况下，这在Firefox中运行良好，但在Webkit浏览器中，当用户第一次开始拖动可拖动图像时，会出现可拖动图像“跳起来”的问题

我也有问题，如何让这种效果在不同的屏幕尺寸上正常工作，因为我同时使用顶部和底部位置调整

//排斥向下动画
var-previousScroll=0；
var scroll=函数（）{
var currentScroll=$（this.scrollTop（）；
var z=$（window.scrollTop（）；
if（currentScroll>previousScroll&&$（'#repel'）.css（'top'）>'-400px'））{
//向下滚动代码
$（“#排斥”）。移除类（“爬升”）；
$（“#排斥”）.addClass（“排斥”）.delay（400）.css（'top'，'+=2%）；
}
if（currentScroll>previousScroll&&$（'#repel'）.css（'top'）<'-400px'））{
//向下滚动代码
$（“#排斥”）。移除类（“爬升”）；
$（“#排斥”）.addClass（“排斥”）.delay（400）.css（'top'，'+=0%）；
}
if（z<10）{
$（“#容器包装器”）.css({
身高：“349%。”
});
}
如果（z>10）{
$（“#容器包装器”）.css({
身高：“360%”
});
}否则{
//否-向上滚动动画/代码
}
previousScroll=currentScroll；
//淡入字泡
如果（z>1250）{
$（'.go'）.fadeIn（'slow'）；
}否则{
$（'.go'）.fadeOut（'slow'）；
}
};
$（文档）.ready（滚动）；
$（窗口）。滚动（滚动）；
//完成后删除动画
$（“#排斥”）.on（'animationend webkitAnimationEnd oanimationend MSAnimationEnd'，函数（）{
$（'排斥'）.removeClass（'排斥'）；
});
//单击时返回到页面顶部
$（'.go'）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：0
}“慢”）；
$（“#排斥”）。移除类（“排斥”）；
$（“#排斥”）.css（'top'，'-100%'）。addClass（“爬升”）。延迟（2100）。队列（函数（下一个）{
$（此）.removeClass（“爬升”）；
next（）；
});
});
//向上拖动，但不要向下拖动
$（“#排斥”）。可拖动({
轴：“y”，
安全壳：“安全壳包装”，
卷轴：没错，
灵敏度：100，
滚动速度：25，
光标：'-moz-grabbing'，
addClasses:false
});
$（“#排斥”）.mousemove（函数（）{
var x=$（'#repel'）.css（'bottom'）；
var z=$（window.scrollTop（）；
$（“#容器包装器”）.css({
底部：x
});
if（z<10）{
$（“#容器包装器”）.css({
底部：“-150%”，
身高：“349%。”
});
}否则{
$（“#容器包装器”）.css({
底部：x
});
}
});

有更好的方法吗

---

我已经试过了，但他们似乎有点不安。

我发现上述方法存在一些问题，主要与使用

position:fixed并使用顶部和底部进行重新定位

我知道这并不完美，但这就是我想到的


// repel down animation 
var previousScroll = 0;
var scroll = function () {
    var currentScroll = $(this).scrollTop();
    var z = $(window).scrollTop();
    var wh = $(window).height();
    var onScreen =  wh - 1100 + 'px';
    if (currentScroll > previousScroll && $('#repel').css('top') > onScreen) {
        //down scroll code
        $("#repel").removeClass("climb");
        $("#repel").addClass("repel").delay(400).css('top', '+=3px');
    }
    if (currentScroll > previousScroll && $('#repel').css('top') <= onScreen) {
        //down scroll code
        $("#repel").addClass("repel");
    }
    if (z < 10) {
        $("#containment-wrapper").css({
            height: "1800px"
        });
    }
    if (z > 10) {
        $("#containment-wrapper").css({
            height: "2000px"
        });
    } else {
        // no- upscroll animation/code  
    }
    previousScroll = currentScroll;
    // fade in word bubble
    if (z > 1350) {
        $('.go').fadeIn('slow');

    } else {
        $('.go').fadeOut('slow');
    }
};

$(document).ready(scroll);
$(window).scroll(scroll);

//remove animation when finished     
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
    $('#repel').removeClass('repel');
});
//bounce back to top of page when clicked      
$('.go').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    $("#repel").removeClass("repel");
    $("#repel").css('top', '-850px').addClass("climb").delay(2100).queue(function (next) {
        $(this).removeClass("climb");
        next();
    });

});


// drag Up, but not down
$('#repel').draggable({
    axis: "y",
    containment: "#containment-wrapper",
    scroll: true,
    scrollSensitivity: 25,
    scrollSpeed: 25,
    addClasses: false
});
$('#repel').mousemove(function () {
    var z = $(window).scrollTop();
    var o = $('#repel').offset().top;
    var h = $('#repel').height();
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    if (z < 10) {
        $("#containment-wrapper").css({
            top: -850
        });
    } else {
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    }
});

//排斥向下动画
var-previousScroll=0；
var scroll=函数（）{
var currentScroll=$（this.scrollTop（）；
var z=$（window.scrollTop（）；
var wh=$（window.height（）；
屏幕上的var=wh-1100+‘px’；
如果（currentScroll>previousScroll&&$（“#排斥”）.css（'top'）>屏幕上）{
//向下滚动代码
$（“#排斥”）。移除类（“爬升”）；
$（“#排斥”）.addClass（“排斥”）.delay（400）.css（'top'，'+=3px'）；
}
if（currentScroll>previousScroll&&$（'#repel'）.css（'top'）10）{
$（“#容器包装器”）.css({
高度：“2000px”
});
}否则{
//否-向上滚动动画/代码
}
previousScroll=currentScroll；
//淡入字泡
如果（z>1350）{
$（'.go'）.fadeIn（'slow'）；
}否则{
$（'.go'）.fadeOut（'slow'）；
}
};
$（文档）.ready（滚动）；
$（窗口）。滚动（滚动）；
//完成后删除动画
$（“#排斥”）.on（'animationend webkitAnimationEnd oanimationend MSAnimationEnd'，函数（）{
$（'排斥'）.removeClass（'排斥'）；
});
//单击时返回到页面顶部
$（'.go'）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：0
}“慢”）；
$（“#排斥”）。移除类（“排斥”）；
$（“#排斥”）.css（'top'，'-850px'）.addClass（“爬升”）.delay（2100）.队列（函数（下一个）{
$（此）.removeClass（“爬升”）；
next（）；
});
});
//向上拖动，但不要向下拖动
$（“#排斥”）。可拖动({
轴：“y”，
安全壳：“安全壳包装”，
卷轴：没错，
敏感度：25，
滚动速度：25，
addClasses:false
});
$（“#排斥”）.mousemove（函数（）{
var z=$（window.scrollTop（）；
var o=$（'#repel'）.offset（）.top；
var h=$（“#排斥”）.height（）；
$（“#容器包装器”）.css({
排名：o+h-2000
});
if（z<10）{
$（“#容器包装器”）.css({
顶部：-850
});
}否则{
$（“#容器包装器”）.css({
排名：o+h-2000
});
}
});

// repel down animation 
var previousScroll = 0;
var scroll = function () {
    var currentScroll = $(this).scrollTop();
    var z = $(window).scrollTop();
    var wh = $(window).height();
    var onScreen =  wh - 1100 + 'px';
    if (currentScroll > previousScroll && $('#repel').css('top') > onScreen) {
        //down scroll code
        $("#repel").removeClass("climb");
        $("#repel").addClass("repel").delay(400).css('top', '+=3px');
    }
    if (currentScroll > previousScroll && $('#repel').css('top') <= onScreen) {
        //down scroll code
        $("#repel").addClass("repel");
    }
    if (z < 10) {
        $("#containment-wrapper").css({
            height: "1800px"
        });
    }
    if (z > 10) {
        $("#containment-wrapper").css({
            height: "2000px"
        });
    } else {
        // no- upscroll animation/code  
    }
    previousScroll = currentScroll;
    // fade in word bubble
    if (z > 1350) {
        $('.go').fadeIn('slow');

    } else {
        $('.go').fadeOut('slow');
    }
};

$(document).ready(scroll);
$(window).scroll(scroll);

//remove animation when finished     
$("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function () {
    $('#repel').removeClass('repel');
});
//bounce back to top of page when clicked      
$('.go').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 'slow');
    $("#repel").removeClass("repel");
    $("#repel").css('top', '-850px').addClass("climb").delay(2100).queue(function (next) {
        $(this).removeClass("climb");
        next();
    });

});


// drag Up, but not down
$('#repel').draggable({
    axis: "y",
    containment: "#containment-wrapper",
    scroll: true,
    scrollSensitivity: 25,
    scrollSpeed: 25,
    addClasses: false
});
$('#repel').mousemove(function () {
    var z = $(window).scrollTop();
    var o = $('#repel').offset().top;
    var h = $('#repel').height();
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    if (z < 10) {
        $("#containment-wrapper").css({
            top: -850
        });
    } else {
        $("#containment-wrapper").css({
            top:  o + h -2000
        });
    }
});