なぜ指定された場所に留まるのではなく、スクロールしている固定位置の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> 

JavaScriptが成功裏に追加#home-box-1本部に次のCSS：

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

結果CSSはもちろんです：

position: fixed; top: 50px; 

お読みいただきありがとうございます。

EDIT
たぶん私のコードのよりは...
を助けるこれは.homepage-huggerと.home-boxのCSS（SCSS）です：

.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%; 
    } 
} 

そして、期待どおりに動作いっぱい関連のJavaScript （これには他のスクロール動作のための無関係なコードが含まれています）。

$(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のアドオンによって追加されたクラスには、子Divのposition: fixedを計算することができないようにtransform: translate()スタイルが追加されました。

問題を解決するには、固定Divをすべてのコンテナから取り出し、それを直接bodyの下に置き、位置を変えて解決しました。

ありがとうございました。感謝。