css - 如何使图像跟随滚动直到某个点

Question

在我尝试使图像跟随浏览器滚动时，我使用了以下 CSS:

position: fixed;

这使得它从上到下一直跟随滚动。我希望它跟随滚动，只要它完全在 div 内。例如，如果图像的底部碰到 div 的底部，我需要它停止滚动。与顶部相同。

我想知道这是否可以用纯 CSS 实现，或者我是否需要 JavaScript，我该如何实现？

Answer 1

只需使用下一个 div 的位置计算图像滚动的限制。

(function($) {
var element = $('#scrollingDiv'),
    originalY = element.offset().top;

var socialelement =  $('#social-area'),
    limitY = socialelement.position().top;

// Space between element and top of screen (when scrolling)
var topMargin = 40;

// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');

$(window).on('scroll', function(event) {
    var scrollTop = $(window).scrollTop();
    var CurrentY = scrollTop + element.outerHeight(true) + topMargin;   
    var MoveUp = limitY < CurrentY ? CurrentY - limitY : 0 ;

        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin - (MoveUp / 2)
        }, 500);
});

})(jQuery);