Issue
I have a css question with the example below. Supposedly there will be an addEventListener
for each article
in Javascript, for the users to click on them and go to other pages. However, they are omitted in this piece of code now, since they're not relevant to my question. I'd like to ask if there is some mistakes in my code that could be corrected, or would there be any solutions to make the aside
on the left to be sticky, while I'm scrolling up or down for the div boxes
on the right?
Thank you!
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
main {
display: flex;
margin: 1rem;
}
#a {
text-align: center;
margin-left: 4rem;
margin-right: 4rem;
}
.boxes {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
article {
height: 10rem;
width: 12rem;
padding: 3%;
margin: 2rem 1rem;
text-align: center;
background-color: #ffffff;
border-radius: 5%;
border-style: solid;
border-color: rgb(255, 255, 255);
border-width: 0 1px 1px 0;
vertical-align: middle;
transition: 0.2s;
}
article:hover {
background-color: #000000;
color: #ffffff;
}
<body>
<main>
<aside id="a">
<h1>abcde</h1>
</aside>
<div id="boxes">
<div>
<article>
<h3>a</h3>
</article>
</div>
<div>
<article>
<h3>b</h3>
</article>
</div>
<div>
<article>
<h3>c</h3>
</article>
</div>
<div>
<article>
<h3>d</h3>
</article>
</div>
<div>
<article>
<h3>e</h3>
</article>
</div>
</div>
</main>
</body>
Solution
First, you need to fix your CSS as long as you're targeting .boxes while it needs to be #boxes, as long as boxes is an ID not a Class
now, you need to use Sticky position at the element to be sticky and set the top to 0, so it will keep sticky at offset Top 0,
i have made this snippet with some more edits, like setting the boxes height, and allow scrolling without moving the sticky part.
check the snippet result,
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
main {
display: flex;
margin: 1rem;
}
aside#a {
text-align: center;
padding-top:3rem;
margin-left: 4rem;
margin-right: 4rem;
position: -webkit-sticky;
position: sticky;
top: 0;
left:0;
bottom:0;
height:100%;
}
/* Vertical */
#boxes {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
overflow: auto;
max-height:100vh;
max-width:100vw;
}
article {
height: 10rem;
width: 12rem;
padding: 3%;
margin: 2rem 1rem;
text-align: center;
background-color: #ffffff;
border-radius: 5%;
border-style: solid;
border-color: rgb(255, 255, 255);
border-width: 0 1px 1px 0;
vertical-align: middle;
transition: 0.2s;
}
article:hover {
background-color: #000000;
color: #ffffff;
}
<body>
<main>
<aside id="a">
<h1>abcde</h1>
</aside>
<div id="boxes">
<div>
<article>
<h3>a</h3>
</article>
</div>
<div>
<article>
<h3>b</h3>
</article>
</div>
<div>
<article>
<h3>c</h3>
</article>
</div>
<div>
<article>
<h3>d</h3>
</article>
</div>
<div>
<article>
<h3>e</h3>
</article>
</div>
<div>
<article>
<h3>f</h3>
</article>
</div>
<div>
<article>
<h3>g</h3>
</article>
</div>
<div>
<article>
<h3>h</h3>
</article>
</div>
</div>
</main>
</body>
as long as you're using the flex in row so this time you can check for column direction
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
main {
display: flex;
margin: 1rem;
width:100%;
}
aside#a {
text-align: center;
padding-top:3rem;
margin-left: 4rem;
margin-right: 4rem;
position: -webkit-sticky;
position: sticky;
top: 0;
left:0;
bottom:0;
height:100%;
width:20%;
}
/* Horizontal */
#boxes {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
overflow: auto;
max-height:100vh;
width:55%;
}
article {
height: 10rem;
width: 12rem;
padding: 3%;
margin: 2rem 1rem;
text-align: center;
background-color: #ffffff;
border-radius: 5%;
border-style: solid;
border-color: rgb(255, 255, 255);
border-width: 0 1px 1px 0;
vertical-align: middle;
transition: 0.2s;
}
article:hover {
background-color: #000000;
color: #ffffff;
}
<body>
<main>
<aside id="a">
<h1>abcde</h1>
</aside>
<div id="boxes">
<div>
<article>
<h3>a</h3>
</article>
</div>
<div>
<article>
<h3>b</h3>
</article>
</div>
<div>
<article>
<h3>c</h3>
</article>
</div>
<div>
<article>
<h3>d</h3>
</article>
</div>
<div>
<article>
<h3>e</h3>
</article>
</div>
<div>
<article>
<h3>f</h3>
</article>
</div>
<div>
<article>
<h3>g</h3>
</article>
</div>
<div>
<article>
<h3>h</h3>
</article>
</div>
</div>
</main>
</body>
Answered By - Burham B. Soliman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.