javascript - 容器旁边的可滚动粘性 div
问题描述
我一直在保持粘性 div 包含在相邻容器内旋转 90 度的文本时遇到问题。我正在尝试完成下图中的内容。
问题是我试图正确对齐它以保持在容器内并正确滚动，但包含文本的粘性 div 会从其容器中流出。见下图。
/* This is the css*/
.work-section {
padding-bottom: 20px;
}
.work-title {
position: -webkit-sticky;
position: sticky;
z-index: 10;
top: 370px;
transform: rotate(-90deg);
width: fit-content;
left: 80px;
transform-origin: 0 0 0px;
}
.tt {
position: relative;
width: fit-content;
}
.test-img {
width: 100%;
}
这是 JSfiddle： https ://jsfiddle.net/Ratsuns/mz08oew3/17/
解决方案
做了三个变种，有一些结果。每个人都有它的想法和限制。
首先，修改了 Ryan Nghiem 的回答
主要区别 - 制作tt class自动正方形，并将标题移至左侧文本。主要限制 - 标题不会低于容器的底部边缘。
body {
color: white !important;
background-color: black !important;
}
/* Work Section */
.work-section {
padding-bottom: 20px;
}
.container {
position: relative;
}
.abs-work {
position: absolute;
width: 100%;
top:0;
bottom:0;
left: -1%;
}
.work-title {
position: -webkit-sticky;
position: sticky;
top: 0;
transform: rotate(-90deg);
width: fit-content;
}
.tt {
position: relative;
width: fit-content;
padding-bottom: 100%;
}
.test-img {
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles-abs.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random-Code</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section>
<div style="height: 150px"></div>
</section>
<section id="work-section1">
<div class="container">
<div class="abs-work">
<div class="work-title">
<div class="tt">
<h2>Recent Work</h2>
</div>
</div>
</div>
<div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
</div>
</div>
</section>
<section>
<div style="height: 1800px"></div>
</section>
</body>
<!-- Scripts Jquery Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
crossorigin="anonymous "></script>
</html>
<script src="js/scripts.js"></script>
</body>
</html>第二种变体，使用display: flex. 标题低于容器的底部边缘。
主要限制 -<div>标题有宽度，这很重要，并且标题越长越宽。
body {
color: white !important;
background-color: black !important;
}
/* Work Section */
.container {
position: relative;
display: flex;
}
.work-section {
padding-bottom: 20px;
}
.work-title {
position: -webkit-sticky;
position: sticky;
top: 0;
transform: rotate(-90deg);
transform-origin: 90% 90%;
white-space: nowrap;
}
.tt {
position: relative;
width: fit-content;
}
.test-img {
width: 100%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles-flex.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random-Code</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section>
<div style="height: 150px"></div>
</section>
<section id="work-section1">
<div class="container">
<div>
<div class="work-title">
<div class="tt">
<h2>Recent Work</h2>
</div>
</div>
</div>
<div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
</div>
</div>
</section>
<section>
<div style="height: 1800px"></div>
</section>
</body>
<!-- Scripts Jquery Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
crossorigin="anonymous "></script>
</html>
<script src="js/scripts.js"></script>
</body>
</html>第三种变体，荒谬，只是为了想法。
body {
color: white !important;
background-color: black !important;
}
/* Work Section */
.container {
display: flex;
}
.work-section {
padding-bottom: 20px;
}
.test-img {
width: 100%;
}
.lala2 {
display: flex;
position: sticky;
top: 0;
height: fit-content;
}
.lala {
display: flex;
flex-direction: column-reverse;
margin-bottom: auto;
margin-right: 8px;
}
.lala div {
transform: rotate(-90deg);
font-size: 2rem;
display: flex;
}
.lala div span {
margin-left: auto;
margin-right: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Random-Code</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section>
<div style="height: 150px"></div>
</section>
<section id="work-section1">
<div class="container">
<div class="lala2">
<div class="lala">
<div><span>R</span></div>
<div><span>e</span></div>
<div><span>c</span></div>
<div><span>e</span></div>
<div><span>n</span></div>
<div><span>t</span></div>
<div><span> </span></div>
<div><span>W</span></div>
<div><span>o</span></div>
<div><span>r</span></div>
<div><span>k</span></div>
</div>
</div>
<div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
<div class="row work-section">
<div class="col-md-6">
<h3>Tuml</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
nisi
dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
omnis
deserunt minima officiis, facere quisquam eius
fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
impedit
rerum ratione minus quas enim natus aperiam nihil!
</p>
<button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
</div>
<div class="col-md-5 offset-md-1 align-self-center">
<figure>
<img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
</figure>
</div>
</div>
</div>
</div>
</section>
<section>
<div style="height: 1800px"></div>
</section>
</body>
<!-- Scripts Jquery Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
crossorigin="anonymous "></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
crossorigin="anonymous "></script>
</html>
<script src="js/scripts.js"></script>
</body>
</html>推荐阅读
- c - 使用 winsock2.h 的问题
- java - 如何自动化新的 Facebook 注册弹出窗口？
- azure - 无法在 .net 框架中的 Azure 函数应用中绑定参数“lockToken”？
- pdf - com.itextpdf.kernel.PdfException：文档已关闭。无法执行动作
- java - 在 Spring-Batch 的上下文中持久存在实体 (jpa) 的问题，该实体是一个带有一些额外字段的连接表
- django - 如何在 Django 中将参数传递给计划的 cron 任务？
- nestjs - NestJs：为什么我们不使用 DTO 来替换所有接口？
- meteor - BigBlueButton 自定义
- angular - CSRF 实施不适用于 OAM
- python - Discord Python 异步事件循环已关闭