我通常会在这里找到每个问题的答案,但找不到这个:
我正在尝试制作一个固定到 top:50px
的 div。
但是,当我滚动页面时,这个 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");
});
});
最佳答案
经过进一步调查,我发现 position: fixed
和 transform: translate()
由于幕后的数学原因无法堆叠。
由附加组件添加到父 Div 的类为其添加了 transform: translate()
样式,这使得子 Div 的 position: fixed
无法计算。
通过将固定的 Div 从所有容器中取出,将其直接放在 body
下并重新定位,问题得到解决。
感谢大家的帮助。赞赏。
关于html - 为什么doe的固定定位div在滚动而不是停留在指定位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43074067/