javascript - 修复定位元素在滚动时停在某个点

Question

box2 是一个固定定位的元素，我需要它在滚动时停在 box1 的顶部和底部。任何帮助，将不胜感激。

   $(window).scroll(function() {
     var h1 = $('.box1').height();
     var h2 = $('.box2').height();
     var h3 = $('.footer').outerHeight(true);
    $('.box2').css('bottom', h3);
});

example

Answer 1

如果我对问题的理解正确，您希望 box2 在视口(viewport)中显示为静态，除非它永远不会超过或低于 box1 的范围。

使用这段代码:

$(window).scroll(function() {
  var scrollTop= $(window).scrollTop(),
      b1= $('.box1'),
      b2= $('.box2'),
      min= b1.position().top,
      max= (b1.position().top + b1.outerHeight()) - b2.outerHeight();

  b2.css({
    top: Math.min(Math.max(scrollTop,min),max) - scrollTop
  });
});

Working Fiddle