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);

Answer 2

如果您使用的是jQuery，则可以使用

轻松查询滚动位置

   $(document).scroll(function() {
      var scrollPos = $(document).scrollTop();
      console.log(scrollPos);
   });

并据此removeClass()，或执行您想要执行的任何操作

如何制作图像跟随滚动直到某一点

2 个答案: