如何使左边或右边的部分粘稠一段时间？
如何使左边或右边的部分粘稠一段时间？
提问于 2020-05-22 10:02:08
我想了解一下，我们如何才能固定特定部分的位置，就像下面的例子一样。
在上面的链接中，苹果手表产品是固定的，而正确的内容移动到一定程度，然后整个页面移动。
我尝试通过提供类粘滞顶来修复左侧的问题。
<div class ="container">
<div class="row">
<div class = "col-sm-3 sticky-top">
<h1> left container</h1>
</div>
<div class = "col-sm-9 offset-2"></div>
</div>
</div>在这里，我并没有把整个代码仅仅是我尝试过但失败的代码的精髓。
回答 2
Stack Overflow用户
发布于 2020-05-22 13:12:20
另外，您还必须在粘性部分中添加高度 CSS属性。(左或右)请参阅：https://jsfiddle.net/kevindev725/6y7kmbh1/44/
<div class="row">
<div class="left sticky-top">
left sticky content
</div>
<div clss="right">
right scrollable content
</div>
</div>引导程序将使用position: stikcy类设置sticky-top，但是对于左边的粘性内容，您应该有固定的大小(根据内容高度您想要的大小)。如果height:fit-content或height: 100px或任何您想要显示内容的高度，同时滚动到右侧，这是可以的。希望这会有帮助。
Stack Overflow用户
发布于 2020-05-22 10:26:36
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #111;
}
.right {
right: 0;
background-color: red;
overflow-y: auto;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="split left">
<div class="centered">
<p>Some text.</p>
</div>
</div>
<div class="split right">
<div class="centered">
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text here too.</p>
</div>
</div>
</body>
</html> 我认为这个骨架足以实现你想要的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61952487
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号