固定定位元素在滚动时停止在某个点

Fix positioned element stops at certain point when scrolling

本文关键字：滚动 定位 元素      更新时间：2023-09-26

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

工作Fiddle

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)
  });
});
  1. 缓存DOM查询
  2. 使min成为页面加载时$b2的原始顶部

jsbin演示

相关文章：