jquery - 在 Internet Explorer 中滚动时粘性标题跳转

Question

页面中间的容器中有一个粘性红色条。我希望这个红色条在向下滚动时保持在顶部并在灰色容器结束之前停止。如果不对折叠的红色条使用固定位置(这在我尝试时引起了一些问题)，那么在 Internet Explorer 中没有红色条跳跃的情况下如何实现这一点？这是我正在做的工作的简化版本，以展示我目前所拥有的东西。

http://codepen.io/codingninja/pen/aKmno

这是我正在使用的 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);
    }
  }
});

提前致谢。

Answer 1

我找到了答案。 Position fixed 实际上确实有效，但在一种情况下，Chrome 和 Firefox 在我正在处理的粘性 header 内的宽度方面不一致。演示中没有，但这个问题可能可以通过一些思考来解决。

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