0

我有一个固定位置的图像，我正在使用 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: "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
        });
    }
});

有一个更好的方法吗？

我试过拖动功能，但它们似乎有点抽搐。

4

1 回答 1

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
        });
    }
});
于 2013-05-24T02:51:44.583 回答