왜 doe의 고정 위치 지정 div가 지정된 위치에 머 무르지 않고 스크롤됩니까?

Question

나는 모든 문제에 대해 대개 여기에서 답을 찾았지만 찾을 수 없습니다.

top:50px으로 고정되도록 div를 만들려고합니다.

그러나

내가 페이지를 스크롤 할 때,이 사업부는 최대 스크롤하고 언급 한 위치에만

가

HTML ... 최소 스크롤 위치의 일종으로 적용됩니다

<div class="homepage-hugger"> 
    <div class="home-box" id="home-box-1"> 
     --- Div's Content --- 
    </div> 
    --- some more stuff --- 
</div> 

자바 스크립트가 성공적으로 추가 #home-box-1 사업부에 다음 CSS :

$("#home-box-1").css({"position": "fixed", "top" : "50px"}); 

결과의 CSS는 물론이고 :

position: fixed; top: 50px; 

감사합니다.

.homepage-hugger{ 
    width: 100%; 
    background-color: #fff; 
    position: relative; 
    z-index: 50; 
    box-shadow: 0 0px 30px rgba(0,0,0,0.4); 

    .home-box{ 
    position: relative; 
    height: 150px; 
    box-shadow: 0 -10px 20px -5px rgba(0,0,0,0.1) inset; 
    width: 100%; 
    max-width: 100%; 
    } 
} 

그리고 예상대로 작동 전체와 관련된 자바 스크립트 :

편집
내 코드가 도움이 될 것입니다 어쩌면 더 ...
그래서 이것은 .homepage-hugger 및 .home-box에 대한 CSS (SCS들)입니다 (다른 스크롤 동작과 관련없는 코드가 포함되어 있습니다) :

$(document).ready(function(){ 

    function mobileCats(){ 
    var catOffset = $("#home-box-1").offset().top; 
    var winScroll = $(window).scrollTop(); 
    var boxPos = catOffset - winScroll; 
    console.log(boxPos <= 50); 
    if (boxPos <= 50){ 
     $("#home-box-1").css({"position": "fixed", "top" : "50px", "left" : "0px"}); 
    } 
    } 

    mobileCats(); 

$(window).scroll(function() 
     { 
     mobileCats(); 
      var x = $(this).scrollTop(); /* scroll pos */ 
      var y = $("html").height(); 
      var z = x/y; 

      curTop = ((z*500)); 
      $(".main-banners").css("top", (curTop)+"px"); 
     }); 
}); 

Answer 1

게이테이션을 통해 나는 position: fixed과 transform: translate()을 배후에서 수학적 이유로 쌓을 수 없다는 것을 알 수있었습니다.

부모 Div에 추가 기능으로 추가 된 클래스가 transform: translate() 스타일을 추가하여 하위 Div의 position: fixed을 계산할 수 없게 만들었습니다.

문제는 모든 컨테이너에서 고정 된 Div를 취하여 body에 직접 놓고 위치를 변경하여 해결되었습니다.

도움을 주셔서 감사합니다. 고맙습니다.