粘性订单审查部分 woocommerce答案

【问题标题】：Sticky order review section woocommerce粘性订单审查部分 woocommerce
【发布时间】：2020-07-21 14:15:53
【问题描述】：

我在让审阅顺序（在本例中为查询）部分粘在滚动标题的底部时遇到了一些麻烦。

我已经经历了几个 jquery 示例，但没有运气，现在正在玩元素的粘性位置。使用 codepen 示例并使用它，我让它正常工作，并尝试通过检查器在页面上复制它，但没有运气。

Codepen 示例

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <div class="second-content">SECOND CONTENT</div> 
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:1000px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
  height:50px; background:#aaa; border-color:red;
}
.main-content{
    display:inline-block;
    width:49%;
    height:900px;
}

.second-content{
  display:inline;
  width: 49%;
  height: 200px;
  position: sticky;
  top:0;
}

https://codepen.io/elad2412/pen/QYLEdK

网站网址 https://trolleys.wpengine.com/

根据我的理解，您需要 jQuery 来阻止它通过页脚，对吗？

我尝试了几种不同的方法并尝试了一些不同的元素，其中一些已经停滞了一段时间，但我需要抓住整个专栏。

这是一个最能说明我追求的例子，尝试实现它但无法让它工作。 http://jsfiddle.net/bryanjamesross/VtPcm/

【问题讨论】：

标签： javascript jquery css woocommerce sticky

【解决方案1】：

固定，

必须给表单一些额外的属性，我将它们应用于外部 div。

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

【讨论】：