ttmt
March 1, 2016, 10:23pm
1
Hi all
I have a jsfiddle here - https://jsfiddle.net/gvqfhf3t/5/
The layout is a bit complicated but it’s whats needes on the actual page.
I want the side bar to be fixed so when the page scrolls it stays at the top of the page.
The sidebar stays at the top of the page but I also need it to stay the width of it’s container.
I’ve tried 100% and auto but they don’t work.
How can I fix the side bar when scrolling and keep it’s width 100% of it’s container.
1 Like
bedakb
March 1, 2016, 10:44pm
2
2 Likes
ttmt
March 2, 2016, 8:49am
3
I was hoping to do this without javascript
PaulOB
March 2, 2016, 11:10am
4
If you want to match the bootstrap column widths then you would need to set the same widths for the fixed element that bootstrap sets for that column in those various media queries.
e.g. for 768px min -width bootstrap has this size.
@media (min-width: 768px) {
.col-sm-4 {
width: 33.33333333%;
}
}
That means you would need to do this:
@media (min-width: 768px) {
.aside {
border: 1px solid green;
position: fixed;
width: 33.3%;
margin-left: -30px;
}
}
You would need to do that for all the other media queries for that column style.
Remember fixed elements always relate to the viewport and not the element they reside in.
system
Closed
June 1, 2016, 6:10pm
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.