Issue
How would you get an element/div to stay in place (WITHOUT position: fixed;) while you scroll? (Actually, this page is a perfect example. The left side with the buttons do not move, while you can scroll this page where the content of this/my post is.)
Say, you have two divs, both are inline-block. The left div you want to stay in place. You only want to allow scrolling on the right div. (different tracks). position: fixed; doesn't really give me the result I'm looking for. Open to any solutions in CSS, vanilla JS, and/or jQuery. Here's some code that I've been trying:
HTML:
<div class="container">
<div class="left">
<!-- Content -->
</div>
<div class="right">
<!-- Content -->
</div>
</div>
CSS:
.left {
display: inline-block;
vertical-align: top;
background-color: #F9F9F9;
border-right: 2px solid $blueBorder;
padding: 0.5%;
overflow-x: hidden;
overflow-y: hidden;
}
.right {
display: inline-block;
vertical-align: top;
background-color: gray;
padding: 0.5%;
}
jQuery:
$(window).scroll(function() {
$('#left').css('top', $(this).scrollTop() + "px");
});
Solution
This can be done with pure css. As you pointed out, this page is an example. If you dig into it with your browser dev tools you will find something similar to this below.
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
padding-top: 40px;
}
.header {
z-index: 1000;
position: fixed;
top: 0;
width: 100%;
height: 40px;
background-color: lightgray;
}
.container {
display: flex;
flex: 1 0 auto;
}
.left {
flex-basis: 300px;
background-color: lightblue;
}
.sticky {
position: sticky;
top: 40px
}
.right {
flex: 1;
overflow: auto;
background-color: lightyellow;
}
.footer {
background-color: lightgray;
}
div {
box-sizing: border-box;
}
.pad {
padding: 5px;
}
<body>
<div class="header pad">
Header
</div>
<div class="container">
<div class="left">
<div class="sticky pad">
Left
<div style="height:60vh;"></div>
Left Bottom
</div>
</div>
<div class="right pad">
Right
<div style="height:200vh;"></div>
Right Bottom
</div>
</div>
<div class="footer pad">
Footer
<div style="height:30vh;"></div>
Footer Bottom
</div>
</body>
Another way I have done things in the past would be to scroll just the right content div and include the footer over there (not full width). Like below.
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 40px;
background-color: lightgray;
}
.container {
display: flex;
flex: 1;
overflow: hidden;
}
.left {
flex-basis: 300px;
overflow: auto;
background-color: lightblue;
}
.right {
flex: 1 0 auto;
display: flex;
flex-direction: column;
overflow: auto;
background-color: lightyellow;
}
.right-content {
flex: 1 0 auto;
}
.footer {
background-color: lightgray;
}
div {
box-sizing: border-box;
}
.pad {
padding: 5px;
}
<body>
<div class="header pad outline">
Header
</div>
<div class="container">
<div class="left pad outline">
Left
</div>
<div class="right">
<div class="right-content pad outline">
Right
<div style="height:200vh;"></div>
Right End
</div>
<div class="footer pad outline">
Footer
</div>
</div>
</div>
</body>
Answered By - AlienWithPizza
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.