限制jQuery-ui Draggable仅在给定区域内向上拖动
我有一个固定位置的图像，我用CSS制作动画，当用户滚动时向下移动屏幕边缘。 – 效果很好。
当图像到达屏幕底部时，用户可以点击它并将其动画回到顶部。 – 也运作良好。
我也试图让用户使用jQuery-ui Draggable将其拖动到顶部。 – 这里出现了并发症。
我需要将图像向上拖动，从不向下，所以我通过移动带有可拖动图像的包含包装来限制我的可拖动元素仅向上拖动。 我还在页面顶部完全限制拖动，以防止图像被拖到页面顶部之外。
在大多数情况下，这在Firefox中运行良好，但我在Webkit浏览器中遇到问题，当用户第一次开始拖动它时，可拖动图像“跳起来”。
我也有问题让这种效果在不同的屏幕尺寸上运行良好，因为我正在使用顶部和底部位置调整。
的jsfiddle
// repel down animation var previousScroll = 0; var scroll = function () { var currentScroll = $(this).scrollTop(); var z = $(window).scrollTop(); if (currentScroll > previousScroll && $('#repel').css('top') > '-400px') { //down scroll code $("#repel").removeClass("climb"); $("#repel").addClass("repel").delay(400).css('top', '+=2%'); } if (currentScroll > previousScroll && $('#repel').css('top') < '-400px') { //down scroll code $("#repel").removeClass("climb"); $("#repel").addClass("repel").delay(400).css('top', '+=0%'); } if (z 10) { $("#containment-wrapper").css({ height: "360%" }); } else { // no- upscroll animation/code } previousScroll = currentScroll; // fade in word bubble if (z > 1250) { $('.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', '-100%').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: 100, scrollSpeed: 25, cursor: '-moz-grabbing', addClasses: false }); $('#repel').mousemove(function () { var x = $('#repel').css('bottom'); var z = $(window).scrollTop(); $("#containment-wrapper").css({ bottom: x }); if (z < 10) { $("#containment-wrapper").css({ bottom: "-150%", height: "349%" }); } else { $("#containment-wrapper").css({ bottom: x }); } }); 有一个更好的方法吗？
我试过拖动function ，但它们看起来有点抽搐。
我发现上述方法存在一些问题，主要与使用position:fixed; 并使用顶部和底部进行重新定位。
我知道它并不完美，但这就是我想出来的……
的jsfiddle
// 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 }); } });