스티키 사이드 바 문제

Question

내 사이드 ​​바에 stickySidebar.js를 사용하고 있습니다. 최근에 발견 한 문제는 아래 이미지에서 볼 수 있듯이 Internet Explorer, Chrome, Opera, Firefox, Safari (MAC) 및 iPad의 #container 위에 나타납니다.

나는 그것이 positioning: ;과 관련이 있다고 추측하고 있습니다. 그러나 틀린 것은 무엇인지 잘못 알아낼 수 없습니다. 스크립트가 위치를 변경하고있을 수도 있습니다.

내가 알아 낸 점은 브라우저 창을 전체 화면으로 확장하면 #sidebar이 컨테이너 위쪽에 있어야한다는 것입니다. 하지만 브라우저 창을 축소하고 다시로드하는 경우 #sidebar은 아래 이미지와 같이 컨테이너 위에 나타납니다. 위의 창을 축소하면 JSFiddle에도 동일하게 적용됩니다. 확장하면 맨 위에 표시되어야합니다.

나는 완전히 작동했습니다. JSFiddle here.

그리고 내 CSS :

#sidebar { 
    display: block; margin: 0 0 0 80px; padding: 10px 0 0 0; 
    width: 290px; height: 300px; 
    background-color: #ffffff; 
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
    z-index: 10; 
} 
#sidebar.sticky { float: none; position: fixed; top: auto; z-index: 10; left: auto; } 

    div#container { 
     position: relative; float: left; clear: none; 
     display: block; margin: 0; padding: 0; 
     width: 100%; height: 2000px; 

     background-color: yellow; 
    } 

    footer { 
     position: relative; float: left; clear: none; 
     display: block; margin: 0; padding: 0; 
     width: 100%; height: 500px; 

     background-color: #1a3c58; 
    } 

내가 fixed에서 absolute에 #sidebar.sticky 위치를 변경하는 경우. 스크립트가 작동하지 않습니다.

감사합니다.

Answer 1

는 그냥 config 변수에서이 줄을 제거 : 원하지 않는 무엇을 것 같다

sidebarTopMargin: -10, 

.