Question

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

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

example

Answer 1

如果我正确理解了这个问题，您希望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

Answer 2

来自Rick Hitchcock的精彩回答，做了一些改进：

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的原始顶部。

jsbin demo

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

2 个答案: