Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Sidebar position "semi" fixed css

How do i get a fixed sidebar like the one containing the social buttons on this site:


I want my sidebar to be fixed to the top of my screen when i scroll down but on the top of the page there must be an absolute position it so that it stops following the browser as i scrool.

Currently I am just using:

#sidebar { position:fixed; }

But this does not give it an absolute position when reaching the top of the page.

Thank you

like image 745
Emil Nielsen Avatar asked Mar 25 '23 06:03

Emil Nielsen

1 Answers


<div class="wrapper"><div class="abs" id="sidebar"></div></div>


.abs { position: absolute; }

.fixed {
position: fixed;
top: 30px !important;}

#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}

.wrapper {
height: 1500px;
padding: 20px;}


 $(document).scroll(function() {
    var scrollPosition = $(document).scrollTop();
    var scrollReference = 10;
    if (scrollPosition >= scrollReference) {      
    } else {

DEMO of this code:


<div class="wrapper">

is the example of content.

like image 89
Bartek Bielawa Avatar answered Apr 01 '23 06:04

Bartek Bielawa