为什么固定位置的 div 是滚动而不是停留在指定位置？答案

【问题标题】：Why doe's fixed positioned div is scrolling instead of staying in the specified location?为什么固定位置的 div 是滚动而不是停留在指定位置？
【发布时间】：2017-08-21 19:02:30
【问题描述】：

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

我正在尝试将 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>

JavaScript 成功将以下 css 添加到 #home-box-1 div：

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

结果css当然是：

position: fixed; top: 50px;

感谢阅读。

编辑
也许我的更多代码会有所帮助...
所以这是.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");
        });
});

【问题讨论】：

应该可以...你能创建一个演示/小提琴吗？
似乎可行。我刚刚创建了一个小提琴：jsfiddle.net/4p2b0oqL
这应该可以。尝试将左右设置为0，看看是否有帮助。
我认为这可能是预期行为的问题。 Sierion，你能确认你在@Asjon 的链接中看到的就是你想要的吗？
是的@Asjon，这就是我想要的，我以前做过。我不明白为什么这次它不起作用。 @sana，我尝试添加 left 定位但没有运气。很奇怪，嗯..？

标签： html css sass css-position positioning

【解决方案1】：

经过进一步调查，我发现position: fixed和transform: translate()由于背后的数学原因无法堆叠。

由附加组件添加到父 Div 的类向其添加了 transform: translate() 样式，这使得子 Div 的 position: fixed 无法计算。

通过将固定的 Div 从所有容器中取出，将其直接放在 body 下并重新定位来解决问题。

感谢大家的帮助。赞赏。

【讨论】：