ratsuns
Reputation: 23
Scrollable sticky div alongside container
I have been having issues keeping a sticky div that contains text which is rotated 90 deg inside an adjacent container. I am trying to accomplish what is in the image below.
The issue is that I've tried to align it correctly to stay within the container and scroll correctly but the sticky div which contains text, flows out of its container. See the image below.
/* 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%;
}
Here is the JSfiddle: https://jsfiddle.net/Ratsuns/mz08oew3/17/
Upvotes: 1
Views: 93
Answers (3)
Aleksandr Belugin
Reputation: 2227
made three variants, with some sort results. Every has it's ideas and restrictions.
First, modified Ryan Nghiem's answer
Main difference - made tt class auto square, and moved heading to text left.
Main restriction - heading doesn't go belower bottom edge of container.
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/[email protected]/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>Second variant, used display: flex. Heading goes belower bottom edge of container.
Main restriction - <div> with heading has width, that matters, and it is wider with longer heading.
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/[email protected]/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>Third variant, ridiculous, just for ideas.
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/[email protected]/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>Upvotes: 1
Akshaye Dinesh
Reputation: 1
.work-title {
position: -webkit-sticky;
position: sticky;
z-index: 10;
top: 100px;
transform: rotate(-90deg);
width: fit-content;
margin-left: -120px;
transform-origin: 0, 0, 0px;
}
Upvotes: 0
Ryan Nghiem
Reputation: 2438
You should have a parent div with position: absolute; full height of container div.
Let's see my code:
.container {
position: relative;
}
.abs-work {
position: absolute;
width: 100%;
top:0;
bottom:0;
}
.work-title {
position: -webkit-sticky;
position: sticky;
z-index: 10;
top: 0;
transform: rotate(-90deg);
width: 200px;
height: 200px;
left: 80px;
transform-origin: 0, 0, 0px;
}
.work-title must to be a square when you using transform: rotate(-90deg);
This is a demo
Upvotes: 0
Related Questions
- Making a bootstrap div scrollable
- Sticky element not working with bootstrap container
- fixed div hiding behind other div when scrolling
- How can I get sticky div inside another div using Bootstrap?
- Sticky div that stays at bottom of the page when page is being scrolled
- Sticky sidebar that scrolls with content
- Scroll a bootstrap affixed div
- Stickysidebar within container
- Make a div sticky with Bootstrap
- CSS/HTML - Floating DIV when I scroll issue