Jquery 在Internet Explorer中滚动时，粘性标题跳转 页面的中间有一个黏糊糊的红色条形容器。我希望这个红色条在向下滚动时保持在顶部，并在灰色容器结束之前停止。如果不为折叠的红色条使用“位置固定”（在我尝试时，这会导致一些问题），如何在Internet Explorer中不使红色条跳跃的情况下实现这一点？下面是我正在研究的一个非常简化的版本，以展示我到目前为止的成果

下面是我使用的jQuery：

var initialHeight = 0;
var wrapperHeight = 0;
$(document).ready(function(){
  wrapperHeight = $('.wrapper').outerHeight();
  initialHeight = $('.sticky-header').outerHeight();
});
$(window).scroll(function(){
  var stickyContainer = $(".sticky-header");
  var containerTop = $(".wrapper").offset().top;
  var containerDistance = containerTop + wrapperHeight;
  var containerLength = stickyContainer.length;
  if(containerLength > 0) {
    var currentPos = $(this).scrollTop();
    var height = initialHeight;
    if(currentPos > containerTop && currentPos + initialHeight < containerDistance) {
      stickyContainer.addClass("collapsed");
      stickyContainer.css("top", Math.max(0, $(this).scrollTop()-containerTop));
      $('.filler').css("height", height);
    }
    else {
      stickyContainer.removeClass("collapsed");
      stickyContainer.css("top", "auto");
      $('.filler').css("height", 0);
    }
  }
});

var initialHeight=0；
var-wrapperHeight=0；
$（文档）.ready（函数（）{
wrapperHeight=$（'.wrapper'）.outerHeight（）；
initialHeight=$（'.sticky header'）.outerHeight（）；
});
$（窗口）。滚动（函数（）{
var stickyContainer=$（“.StickyHeader”）；
var containerTop=$（“.wrapper”）.offset（）.top；
var containerDistance=containerTop+包装高度；
var containerLength=stickyContainer.length；
如果（容器长度>0）{
var currentPos=$（this.scrollTop（）；
变量高度=初始高度；
如果（当前位置>容器顶部和当前位置+初始高度<容器距离）{
stickyContainer.addClass（“折叠”）；
css（“top”，Math.max（0，$（this.scrollTop（）-containerTop））；
$（'.filler'）.css（“高度”，高度）；
}
否则{
stickyContainer.removeClass（“折叠”）；
css（“top”、“auto”）；
$（'.filler'）.css（“高度”，0）；
}
}
});

---

提前谢谢

我找到了答案。“位置固定”确实有效，但有一种情况是，在Chrome和Firefox中，我正在处理的内容在粘性标题中的宽度不一致。它不在演示中，但是这个问题可以通过一些思考来解决

CSS更改

.collapsed {
  height: 50px;
  font-size: 20px;
  position: fixed;
  top: 0;
}

JQuery

var initialHeight = 0;
var wrapperHeight = 0;
$(document).ready(function(){
  wrapperHeight = $('.wrapper').outerHeight();
  initialHeight = $('.sticky-header').outerHeight();
});
$(window).scroll(function(){
  var stickyContainer = $(".sticky-header");
  var containerTop = $(".wrapper").offset().top;
  var containerDistance = containerTop + wrapperHeight;
  var containerLength = stickyContainer.length;
  if(containerLength > 0) {
    var currentPos = $(this).scrollTop();
    var height = initialHeight;
    if(currentPos > containerTop && currentPos + initialHeight < containerDistance) {
      stickyContainer.addClass("collapsed");
      $('.filler').css("height", height);
    }
    else {
      stickyContainer.removeClass("collapsed");
      $('.filler').css("height", 0);
    }
  }
});

var initialHeight=0；
var-wrapperHeight=0；
$（文档）.ready（函数（）{
wrapperHeight=$（'.wrapper'）.outerHeight（）；
initialHeight=$（'.sticky header'）.outerHeight（）；
});
$（窗口）。滚动（函数（）{
var stickyContainer=$（“.StickyHeader”）；
var containerTop=$（“.wrapper”）.offset（）.top；
var containerDistance=containerTop+包装高度；
var containerLength=stickyContainer.length；
如果（容器长度>0）{
var currentPos=$（this.scrollTop（）；
变量高度=初始高度；
如果（当前位置>容器顶部和当前位置+初始高度<容器距离）{
stickyContainer.addClass（“折叠”）；
$（'.filler'）.css（“高度”，高度）；
}
否则{
stickyContainer.removeClass（“折叠”）；
$（'.filler'）.css（“高度”，0）；
}
}
});

此解决方案仍不完美。当粘性达到滚动中的某个点时，它会跳跃。