html 页面滚动时 div位置不变,html - 为什么doe的固定位置div滚动而不是停留在指定位置？ - 堆栈内存溢出...

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

我正在尝试将div固定为top:50px 。

但是，当我滚动页面时，此Div正在向上滚动，并且所提到的位置仅作为最小滚动位置的一种。

HTML：

--- Div's Content ---

--- some more stuff ---

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");

});

});