Html 为什么不'；的固定位置div正在滚动，而不是停留在指定位置？

我通常在这里找到每个问题的答案，但找不到：

我正在尝试将div固定到

top:50px

然而，当我滚动页面时，这个Div正在向上滚动，所提到的位置只是作为最小滚动位置的一种应用

html:

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

结果当然是：

position: fixed; top: 50px;

谢谢你的阅读

编辑
也许我的更多代码会有帮助…
这就是

.homepage hugger

和

.home box

的css（SCS）：

.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（它包括一些用于其他滚动行为的无关代码）：

$（文档）.ready（函数（）{
函数mobileCats（）{
var catOffset=$（“#home-box-1”）.offset（）.top；
var winScroll=$（window.scrollTop（）；
var boxPos=catOffset-winScroll；
console.log（boxPos经过进一步调查，我发现由于幕后的数学原因，
位置：fixed
和
转换：translate（）
无法堆叠

由外接程序添加到父Div的类向其添加了
transform:translate（）
样式，这使得子Div的
position:fixed
无法计算

通过从所有容器中取出固定Div，将其直接放在
主体下并重新定位，问题得以解决

谢谢大家的帮助。谢谢。
这应该行得通……你能创建一个演示/提琴吗？似乎行得通。我刚刚创建了一个提琴：这应该行得通。试着将左和右设置为0，检查是否有帮助。我想这可能是一个预期行为的问题。Sierion，你能确认你在@Asjon的链接中看到的是正确的吗你想要什么？是的@Asjon，这就是我想要的，我以前也做过。我不明白为什么这次不起作用。@sana，我试着在没有运气的情况下添加
左
定位。奇怪吧。。？
.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%;
  }
}

$(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");
        });
});