Javascript 滚动时，固定定位元素在特定点停止

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

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

---

如果我正确理解了这个问题，您希望

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

---

如果我正确理解了这个问题，您希望

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

来自的回答很好，做了一些改进：

var $b1 = $('.box1'); // 1
var $b2 = $('.box2'); // 1
var min = $b2.position().top; // 2

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

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

缓存DOM查询

在页面加载时，使

min

成为

$b2

的原始顶部

来自的回答很好，做了一些改进：

var $b1 = $('.box1'); // 1
var $b2 = $('.box2'); // 1
var min = $b2.position().top; // 2

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

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

缓存DOM查询

在页面加载时，使

min

成为

$b2

的原始顶部

---

这是一个非常优雅的答案+1谢谢你的回答，Rick，这段代码在所有浏览器中都非常有效，但IE除外。当滚动到IE中的绝对位置时，它似乎会闪烁。但是，当使用固定位置时，这个问题不会发生，你知道这是怎么回事吗，最好的解决方法是什么。啊，总是IE，不是吗？我已经恢复了固定位置并更新了答案。这应该可以解决大部分（但不是全部）IE闪烁的问题。谢谢你的评论，Rick，固定位置似乎比绝对位置工作得更好，但是当在IE中滚动到顶部和底部时，它仍然会闪烁，这很烦人。这是一个非常优雅的回答+1谢谢你的回答，Rick，这段代码在所有浏览器中都非常有效，但IE除外。当滚动到IE中的绝对位置时，它似乎会闪烁。但是，当使用固定位置时，这个问题不会发生，你知道这是怎么回事吗，最好的解决方法是什么。啊，总是IE，不是吗？我已经恢复了固定位置并更新了答案。这应该可以消除大部分（但不是全部）IE闪烁的问题。谢谢你的评论，Rick，固定位置似乎比绝对位置工作得更好，但是当在IE中滚动到顶部和底部时，它仍然会闪烁，这太烦人了。