Блог

Главная - Вопросы по программированию - Позиция только для CSS-x: исправлено

Позиция только для CSS-x: исправлено

#html #css

Вопрос:

Возможно ли иметь элемент с эффективно position: fixed по оси x, но position: absolute по оси y, без JavaScript? Смотрите этот фрагмент для примера, в котором используется 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>

Ответ №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>
Метки: