I got a sidebar now, but I dont want it to stay in the same position when the user scrolls (HTML, CSS)
position:absolute
will use the same left/top position, except it will not be stuck in place.
CSS Sticky sidebar and fixed header
You need to define z-index on #header{z-index: 10;}
and don't need to use float
so you can achieve with display: flex & order:1
properties and use position: sticky; top:110px
on #sidebar
for stick without JavaScript.
Check my below snippet
*{box-sizing: border-box;}
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
h2,p{margin: 0;}
#header {
position: fixed;
width: 100%;
max-width: 800px;
height: 80px;
top: 10px;
margin: 0 auto;
left: 0;
right: 0;
background-color: black;
color:red;
z-index: 10;
}
#body{
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
border: 1px solid #ccc;
padding: 5px;
width: 100%;
max-width: 800px;
box-sizing: border-box;
margin: 110px auto 20px auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#sidebarWrap {
position: sticky;
top: 110px;
height: auto;
min-width: 210px;
max-width: 210px;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
background-color: #72f8cb;
order: 1;
}
#content {
width: 100%;
height: 800px;
background-color: #f8d3a2;
}
#footer {
height: 800px;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 5px;
background-color: #ccc;
}
<div id="header">
<h2>Header</h2>
<p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla</p>
</div>
<div id="body">
<div id="sidebarWrap">
<div id="sidebar">
<h2>Sidebar</h2>
<p>Sidebar has content in it and will be sticky until it's bottom container reaches the footer container.
Then it will scroll up as expected. But will be blocked by fixed header</p>
</div>
</div>
<div id="content">
<h2>Content</h2>
<p>This is the main content section.</p>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<p>This is the footer</p>
</div>
How to make sidebar fixed?
.sidebar-left {left: 0px; top: 20px; padding: 0px; position:fixed;}
You need to define where you want the sidebar to be fixed in relation to. Hence the left: 0px and top: 20px. If you want it fixed relative to the header, footer or rhs, just change the 'left' for the correct position.
Hope that helps.
sidebar not showing in the right place until the loading of the site finish
Have you tried to call the script on window.load()
instead of ready()
.
CSS Position Sticky Sidebar Within Grid
You can add align-self: flex-start
to override the default stretch behaviour of sidebar
( because it is a grid item)
Now you can explicitly set 100vh height
to the sidebar
- see demo below without grid-gap
and / or margin
or padding
#top { position: sticky; top: 0; border: 1px solid red; width: 100%;}
.container { display: grid; /*grid-gap: 50px;*/ grid-template-columns: max-content 1fr; /* margin-top: 50px;*/ margin-left: auto; margin-right: auto; max-width: 900px;}
.sidebar { border: 1px solid blue; position: sticky; top: 0; /* ADDED */ align-self: flex-start; /* override the default stretch */ height: 100vh; /* set a fixed height */}
.content { border: 1px solid green;}
<div id="top"> sticky header</div><div class="container"> <div class="sidebar"> sticky sidebar </div> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat. </p> <p> Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor. </p> <p> Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque. </p> <p> Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue. </p> <p> Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus. </p> </div></div>
How to make sidebar and header fixed using css
You can try this code, hope it works for you.
HTML:
<div class="whole-page" *ngIf="showSidebar; else login">
<!--header-->
<div class="ui top attached demo menu header" >
<h3>Attendance Management System</h3>
</div>
<!--sidebar-->
<sui-sidebar-container class="ui bottom attached segment">
<sui-sidebar class="inverted vertical side-bar" #sidebar>
<li>
<a class="item" routerLink="/attendance-record">Attendance Record</a>
</li>
<li>
<a class="item" routerLink="/timestamp-cebu">Timestamp Cebu</a>
</li>
<li>
<a class="item" routerLink="/attendance-record">Attendance Record</a>
</li>
<li>
<a class="item" routerLink="/timestamp-cebu">Timestamp Cebu</a>
</li>
</sui-sidebar>
<sui-sidebar-sibling class="content" [isDimmedWhenVisible]="false">
<div class="pages">
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>
</sui-sidebar-sibling>
</sui-sidebar-container>
</div>
CSS:
.header{
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
background: black;
color: white;
z-index: 3;
}
.side-bar{
width: 25%;
float: left;
position: fixed;
background: red;
height: 100vh;
top: 60px;
}
.content{
background: green;
width: 75%;
display: inline-block;
position: absolute;
right: 0;
top: 60px;
}
Related Topics
Change in Doctype Causes Webpage to Render Differently
@Font-Face Ie9 Font-Weight Doesn't Work
Where Should I Use CSS Vendor Prefixes
How to Make a "Double Arrow" with CSS3 Content Technique
CSS Specificity - External Style Sheet Vs Internal Style Sheet Using Just Classes
How to Change The CSS of Only One Page in Wordpress
Connecting Xslt to External CSS
CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair
How to Remove Upload Cancel Button from <P:Fileupload>
Custom Fields for Shopify User Registration Form
4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How
Rails 4: How to Identify and Format Links, Hashtags and Mentions in Model Attributes
CSS3 Transform: Translate3D Doesn't Affect The Z-Axis