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

답변을 찾았습니다. 고정 된 위치가 실제로 작동하지만 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); 
    } 
    } 
});