html - 仅 CSS 位置 x : fixed

Question

是否可以在没有 JavaScript 的情况下使元素在 x 轴上具有有效的 position: fixed，但在 y 轴上具有 position: absolute？有关使用 JavaScript 的示例，请参阅此代码段:

$(window).scroll(function(){
    var $win = $(window);
    $('#box1').css('top', 20 -$win.scrollTop());
    $('#box2').css('left', 20 -$win.scrollLeft());
});

html, body {
  width: 2000px;
  height: 2000px;
}

.box {
    width: 400px;
    height: 80px;
    background: gray;
    position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box1" class="box" style="left:20px;top:20px;">
  My position-x is fixed but position-y is absolute.
</div>
<div id="box2" class="box" style="left:20px;top:120px;">
  My position-x is absolute but position-y is fixed.
</div>
<div id="box3" class="box" style="left:20px;top:220px;">
  Im positioned fixed on both axis.
</div>

Answer 1

您可以使用 margin-top 和 position: sticky。它会给你想要的结果。

$(window).scroll(function() {
  var $win = $(window);
  $('#box1').css('top', 20 - $win.scrollTop());
  $('#box2').css('left', 20 - $win.scrollLeft());
});

html,
body {
  width: 2000px;
  height: 2000px;
}

.box {
  width: 400px;
  height: 80px;
  background: gray;
  position: fixed;
}

#box3 {
  margin-top: 220px; /* use 'margin-top' instead of 'top' */
  position: sticky;
  left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box1" class="box" style="left:20px;top:20px;">
  My position-x is fixed but position-y is absolute.
</div>
<div id="box2" class="box" style="left:20px;top:120px;">
  My position-x is absolute but position-y is fixed.
</div>
<div id="box3" class="box">
  Im positioned fixed on both axis.
</div>