Question

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

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

我也试图让用户使用jQuery-ui Draggable将其拖到顶部。 - 这里出现了并发症。

我需要将图像向上拖动，永远不要向下，所以我限制了我的可拖动元素只能通过移动带有可拖动图像的包含包装来向上拖动。我还完全限制页面顶部的拖动，以防止图像被拖到页面顶部之外。

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

我也遇到了使这种效果在不同屏幕尺寸上正常工作的问题，因为我正在使用顶部和底部位置调整。

// 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: "349%"
        });
    }
    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
        });
    }
});

有更好的方法吗？

我已经尝试Drag functions，但它们看起来有点抽搐。

Answer 1

我发现上述方法存在一些问题，主要是使用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
        });
    }
});

限制jQuery-ui Draggable仅在给定区域内向上拖动

1 个答案: