我可以使用 position: fixed 垂直定位和 position: absolute 水平定位吗？

Question

我在页面底部有一段文字，上面写着“Built By Me”。我将其固定在距离窗口底部和左侧35像素的位置，所以当您滚动时它会移动。实际上，我想要的是垂直固定它，这样当您上下滚动时它就会移动，并且始终距离窗口底部35像素，但是将其放置在页面左侧（而不是屏幕）距离为35像素，这样当您水平滚动时它就不会移动。我查看了Position element fixed vertically, absolute horizontally，但不幸的是它对我没有用。FYI，我目前正在使用以下代码将其固定在顶部和底部，这很好用（但在水平滚动时也会移动）：

#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}

*html #sticky {
position: absolute;
bottom: 0px;
}

<div id="sticky">
Built by Me
</div>

非常感谢您能提供任何指导，因为我无法想出如何仅在一个轴上修复它？

戴夫

- deshg

---

可能是 Position element fixed vertically, absolute horizontally 的重复问题。 - kotekzot

Answer 1

保持固定的div，并使用以下JavaScript代码来处理水平移动。

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});

- Vimalkumar Kalimuthu

---

有些人可能也想在窗口大小调整时触发它，例如 $(window).on("resize scroll",function(){...} - Adriano

Answer 2

我认为实现这一点的唯一方法是使用 position: fixed;，并在页面加载或调整大小时通过确定“页面”的左边缘位置并添加35px来计算left的值。如果您需要更详细的解释，请告诉我。

- Scott Cranfill

---

非常感谢你的帮助，Scott。我本来希望有另一种方法，但这样也很好，我使用了$(window).scroll(function () {来实现这个功能。不过非常奇怪的是，如果我增加左侧位置，它似乎不起作用，但是如果我使用以下代码，在所有浏览器中都可以完美地工作。出于好奇，你知道为什么吗？因为这只是将它保留在原来的状态，非常感谢你的帮助。<script type="text/javascript"> $(window).scroll(function () { $("#sticky").offset({ bottom: 35, left: 35 }); }); </script> - deshg

这是一个非常好的问题。它一定与滚动有关，但我必须承认我对jQuery的了解不如应该，所以我不能确定。不过很高兴我能帮到你！ - Scott Cranfill