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

我找到了答案。固定位置实际上确实有效，但有一种情况是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);
    }
  }
});

在Internet Explorer中滚动时粘滞标题跳转

1 个答案: