Issue
I have a 3 column layout with a Sticky left column, a fixed image at the top of the middle column, and a static right column. I am having trouble with the inner-main content appearing above the static image instead of below it and I am not sure how to fix it. I can't set the top for inner-main to offset it because that will break the sticky left column when scrolling. I also tried setting the image as a background at one point but ran into other issues.
I would like the image to be fixed so that when you scroll the page .inner-main will cover the image as you scroll. Similar to this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax
Codepen: https://codepen.io/JeyDen44/pen/xxMZjVY
body, .main, .inner-main {
background-color: #f6f6f6;
}
.main {
position: relative;
top: 10px;
}
.banner {
position: fixed;
width: inherit;
}
.banner img {
width: inherit;
position: relative;
}
.inner-main {
position: relative;
}
ul {
list-style: none;
margin-top: 25px;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
height: 100%;
}
<div class="container">
<div class="row home-box-set">
<div class="col-md-2 sticky">
<ul>
<li>Home</li>
<li>Transition</li>
<li>Map</li>
<li>FAQ</li>
<li>Registration</li>
</ul>
</div>
<div class="col-md-8 main">
<div class="banner">
<img src="https://t3.ftcdn.net/jpg/05/44/71/76/360_F_544717699_VCMUmoQTeIxRWmx7AaUmTL0uh35v9d3V.jpg" />
</div>
<div class="inner-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-md-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
I can't seem to get the left column to stay sticky. I've tried setting the height to 100
Solution
newer answer :
To make the parallax effect work, Do the following :
HTML :
<div class="col-md-8 main">
<div class="parallax"></div>
<div class="inner-main">
<!-- Your content here -->
</div>
</div>
CSS :
.parallax {
/* The image used */
background-image: url("https://t3.ftcdn.net/jpg/05/44/71/76/360_F_544717699_VCMUmoQTeIxRWmx7AaUmTL0uh35v9d3V.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Older answer:
The image you want to be fixed at the top of the middle column is set to "position: fixed," which will take it out of the normal document flow. To fix this issue, you can wrap the image in a container and use position: sticky to achieve the desired effect. Here's how to do it:
1- Wrap your image in a container:
HTML
<div class="banner-container">
<img class="banner" src="your-image-source.jpg" />
</div>
CSS
.banner-container {
position: sticky;
top: 0;
z-index: 1; /* Ensures it's above the main content */
background-color: #f6f6f6; /* Match the background color */
}
.banner {
width: 100%;
max-width: 100%;
}
2- Remove the top: 10px; from your .main class to ensure the correct spacing between the image and content.
3- If you want to create space between the fixed image and the main content, add padding to the .inner-main class:
.inner-main {
padding-top: 10px;
}
Answered By - Sayed Mohamed Ebrahim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.