[英]Sticky order review section woocommerce
我在让审查订单(在这种情况下是查询)部分粘在滚动时 header 的底部时遇到了一些麻烦。
我已经经历了一些 jquery 的例子,但没有运气,现在我正在玩这个元素的粘性 position。 使用 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
网站 URL https://trolleys.wpengine.com/
根据我的理解,您需要 jQuery 来阻止它通过页脚,对吗?
我尝试了几种不同的方法并尝试了一些不同的元素,其中一些已经卡了一段时间,但我需要抓住整个专栏。
这是一个最能说明我之后的例子,尝试实现它但无法让它工作。 http://jsfiddle.net/bryanjamesross/VtPcm/
固定的,
必须给表单一些额外的属性,我将它们应用于外部 div。
form.checkout {
height: 1500px;
position:relative;
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.