CSS "position: sticky" on horizontal scroll

CSS "position: sticky" on horizontal scroll - javascript

I'm trying to build a horizontal scroll with multiple content boxes that belong to one title. So I'd like the title to stay while the content scrolls past it, until the next section with a new title comes.
Here's what I was trying to do: https://jsfiddle.net/kjo4duts/23/
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
</div>
<div class="content">
Content
</div>
</div>
</div>
Is there a way to address the "position: sticky" property to the outer parent (.scroll)? Or is there a smooth way to do it in JavaScript?
I tried to change the HTML structure, but with Flexbox you need a container for each box to get a horizontal layout..
Thanks in advance!
Edit: For anyone with the same problem. The solution is to add a relative position to the outer parent and the change the HTML structure a bit.
See updated Fiddle: https://jsfiddle.net/r2czqwn7/20/

Parent (.scroll) has to be position: relative at first as you can check below but I would consider different structure (all contents with same title could be in same div) to stick it over multiple items.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.scroll {
position: relative;
display: flex;
flex-direction: row;
width: 100vw;
height: 100px;
background: yellow;
overflow: scroll;
}
.item {
flex-flow: column;
flex-shrink: 0;
width: 200px;
height: 100%;
margin-right: 20px;
}
.scroll .item .title {
position: sticky;
display: inline;
left: 0;
top: 0;
width: 100%;
height: 40px;
}
.item .content {
width: 100%;
height: 60px;
border: 3px solid green;
}
.item .content:first-child {
margin-top: 1rem;
}
<div class="scroll">
<div class="item">
<div class="title">
Title 1
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="title">
Title 2
</div>
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
<div class="item">
<div class="content">
Content
</div>
</div>
</div>

Related

Display remaining items count in a list of divs

I have a horizontal list of divs, and I want to display the remaining items count while scrolling.
Here's a playground code i try on
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </>
</div>
So, How can i replace the count word with the actual remaining count?

Something like this - you may want to add 6 for the border on both sides of the divs
const count = document.querySelector(".count");
const divs = document.querySelectorAll(".item").length;
document.querySelector(".horizontal").addEventListener("scroll", function() {
count.textContent = divs - parseInt(this.scrollLeft / 50)
})
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </div>
</div>

Problem when using display none with divs and footer

Ok, let's say that I have two buttons, a container with two divs and below I have my footer, like this:
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<footer></footer>
I'm displaying content inside my divs. Div "one" has more height, much more. In order to hide div "two" and don't overlap content, I use opacity:0.
I have two buttons, to show or to hide div "one" or "two" (using jQuery).
But if I only use opacity:0 to hide div "one" when I show div "two", the page leaves a big space empty (due to div "one" has more height than div "two"). As here:
enter image description here
So I decided to use display:none to hide div "one", in order to don't leave space and just show the necessary space for div "two". But my footer goes up!! And overlaps content with div "two".
Here is the image: enter image description here
How can I solve this? Any ideas? I realized that my footer moves because not finding the content of div "one", it goes up. Sorry for my english haha
Here I leave you guys an excelent example of what happens to me, you can COPY and run:
HTML:
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('display', 'none');
cont_curses.css('opacity', '1');
});
bt1.click(function(){
cont_curses.css('opacity', '0');
cont_all.css('display', 'flex');
});
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
}
.one {
overflow: hidden;
}
.two {
width: 100%;
position: absolute;
top: 0px;
opacity: 0;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Well it's not the same at all, because it's a big project, but basically is that.

Full answer
check the max-height toggles
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None</title>
<link rel="stylesheet" href="estilos.css">
<style>
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
</style>
</head>
<body>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('max-height', '0px');
cont_curses.css('max-height', '100%');
});
bt1.click(function(){
cont_curses.css('max-height', '0px');
cont_all.css('max-height', '100%');
});
</script>
</body>
</html>

I am slightly changed #alexkarpen answer. Instead of max-height you can also use fadeIn() and fadeOut() jquery function. it looks a little bit cool
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
var cont_project = $('.three');
var bt3 = $('#bt3');
bt2.click(function(){
cont_all.fadeOut("slow");
cont_project.fadeOut();
cont_curses.fadeIn("slow");
});
bt3.click(function(){
cont_all.fadeOut();
cont_curses.fadeOut();
cont_project.fadeIn("slow");
});
bt1.click(function(){
cont_curses.fadeIn("slow");
cont_project.fadeIn("slow");
cont_all.fadeIn("slow");
});
.container {
margin-top: 30px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two, .three {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.card {
width: 25%;
height: 200px;
margin: 15px;
}
.chart {
background: #2096CE;
}
.curse {
background: #23AD5A;
}
.project {
background: pink;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bt1">Show All</button>
<button id="bt2">Show Curses</button>
<button id="bt3">Show Projects</button>
<div class="container">
<div class="one">
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
</div>
<div class="two">
<div class="card curse"></div>
<div class="card curse"></div>
<div class="card curse"></div>
</div>
<div class="three">
<div class="card project"></div>
<div class="card project"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>

Try this:
footer { height: 200px; background: black; color: white; display: flex; justify-content: center; text-align: center; position:fixed; bottom: 0px; }

Make html element only visible in one section of page

im looking for this problem the last 2 days but didnt find any solution.
I prepared this jsFiddle for you to show you my exact problem.
How do I make the image only visible for section 2? Like it should scroll behind the layer of section 1.
It works from section 2 into section 3 but i cant find a solution to place it behind section 1.
JsFiddle Demo
h2 {
margin: 0;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 1;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>

I added this CSS:
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
No background on section1 allowed the element to be seen through div.section1
h2 {
margin: 0;
}
.section1 {
position: relative;
z-index: 100;
background-color: lightgray;
}
/** Section 1 **/
.textbox {
position: absolute;
z-index: 100;
text-align: center;
top: 300px;
left: 0%;
right: 0%;
}
.textboxcontent {
position: relative;
margin-bottom: 25px;
font-family: 'Roboto', sans-serif;
padding-left: 15px;
padding-right: 15px;
opacity: 0.8;
font-weight: normal;
}
.background-video {
overflow: hidden;
}
.background-video video {
height: 100%;
width: 177.77777778vh;
min-width: 100%;
min-height: 56.25vw;
object-fit: cover;
opacity: 0.3;
}
/** Section 2 **/
.relative {
position: relative;
background-color: orange;
margin-top: -4px;
}
.frame {
width: 400px;
margin: 0 auto;
border-left: 1px solid black;
border-right: 1px solid black;
}
.section2 {
min-height: 50vh;
}
/** Section 3 **/
.relative2 {
position: relative;
background-color: yellow;
}
.section3 {
min-height: 50vh;
}
/** Section 3 **/
.relative3 {
position: relative;
background-color: purple;
}
.section4 {
min-height: 50vh;
}
/** Section 4 **/
.relative4 {
position: relative;
background-color: pink;
}
.section5 {
min-height: 50vh;
}
.animation {
width: 200px;
height: 150px;
position: fixed;
right: 0;
top: 300px;
z-index: 0;
}
.animation img {
width: 100%;
height: 100%;
}
<main>
<div class="section1">
<div class="background-video">
<video src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" autoplay></video>
</div>
<div class="textbox">
<div class="textboxcontent">
<h2>Welcome</h2>
</div>
</div>
</div>
<div class="relative">
<div class="animation">
<img src="https://www.webkit.org/blog-files/acid3-100.png" alt="">
</div>
<div class="frame">
<div class="section2">
<h2>Section 2</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative2">
<div class="frame">
<div class="section3">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative3">
<div class="frame">
<div class="section4">
<h2>Section 3</h2>
<p>example text</p>
</div>
</div>
</div>
<div class="relative4">
<div class="frame">
<div class="section5">
<h2>Section 4</h2>
<p>example text</p>
</div>
</div>
</div>
</main>
fiddle

Is it possible to fill an empty space using flex-start?

I use flexbox and my flex items can be collapsed. If I use 'align-items: stretch', they won't be able to collapse. If I use 'flex-start', there is a lot of empty space. The problem is I don't know what to do with empty space when it's not collapsed. Is it possible to set the height of elements like the I use 'stretch'?
If not, what are the alternatives?
The logic looks like this: https://codepen.io/darius9171/pen/qyVERX
or:
document.querySelectorAll('.item').forEach(item => {
item.addEventListener('click', (event) => {
event.currentTarget.classList.toggle('collapsed');
});
})
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
border: 1px solid black;
width: 100%;
}
.container .item {
flex-basis: calc(100% / 3 - 1rem);
flex-grow: 1;
width: 50px;
background-color: black;
margin: 0.5rem;
color: white;
text-align: center;
cursor: pointer;
}
.container .item:nth-child(1) .body {
height: 25px;
}
.container .item:nth-child(2) .body {
height: 50px;
}
.container .item:nth-child(3) .body {
height: 75px;
}
.container .item:nth-child(4) .body {
height: 100px;
}
.container .item:nth-child(5) .body {
height: 125px;
}
.container .item .body {
transition: all 0.7s ease-in-out;
overflow: hidden;
}
.container .item.collapsed .body {
height: 0;
}
<div class="container">
<div class="item">
<div class="header">Head 1</div>
<div class="body">Body 1</div>
</div>
<div class="item">
<div class="header">Head 2</div>
<div class="body">Body 2</div>
</div>
<div class="item">
<div class="header">Head 3</div>
<div class="body">Body 3</div>
</div>
<div class="item">
<div class="header">Head 4</div>
<div class="body">Body 4</div>
</div>
<div class="item">
<div class="header">Head 5</div>
<div class="body">Body 5</div>
</div>
</div>

Adjust a Div's Style Depending on Another Div's Presence?

In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/

Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

CSS "position: sticky" on horizontal scroll - javascript

Related

Display remaining items count in a list of divs

Problem when using display none with divs and footer

Make html element only visible in one section of page

Is it possible to fill an empty space using flex-start?

Adjust a Div's Style Depending on Another Div's Presence?

Categories

Resources