javascript - 修复滚动时定位元素在特定点停止的问题

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

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

example

最佳答案

如果我正确理解了这个问题，则您希望box2在视口中显示为静态，除非它永远不会超出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