Question

我正在Woocommerce的结帐页面上工作，该页面分为两半。左侧为表格，右侧为订单概览。我将概述设置为this.current_search = this.current_search.replace(n, '')，以便在您填写表单时向下滚动。

我实际上有几个不同的页面，其中包含带有position:sticky;的元素，这些元素工作得很好，所以我不知道为什么无法在这里使用它。唯一的区别是各列之间的position:sticky;和<h3>包装器之间。

<form>

form.checkout {
  display: block;
  position: relative;
}

.checkout:before,
.checkout:after {
  content: "";
  display: table;
  clear: both;
}

.col-1 {
  float: left;
  width: 50%;
  margin-right: 5%;
}

h3 {
  display: inline-block;
}

.col-2 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  float: left;
  width: 45%;
}

Answer 1

您的div粘性，

检查一下

form.checkout {
  display: block;
  position: relative;
  height: 1000px;
}

https://jsfiddle.net/yto9uj32/

为什么不定位：粘性；工作

1 个答案: