How to make a fixed menu/sidebar while using position:relative?

Tags: jquery,html,css,scroll,fixed

Problem :

I want to make an relative div that can be scrolled down until it reaches the top of the page, then the div should be fixed and stay on top until page is scrolled up again. Perhaps I should use jquery?!

These are my code. The div called: .sidebar is the one I want to have fixed while scrolling! I have shown more divs and css styles to show you guys how it is. This is how it looks like:

<div id="header" class="container">

<div id="navbar">

        <div id="menu">
                <li><a href="#" accesskey="3" title="contact">contact</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="portfolio.html" accesskey="4" title="portfolio">portfolio</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="#" accesskey="5" title="about">about</a></li>
                <li><img src="images/icon_triangle.jpg"></li>
                <li><a href="index.html" accesskey="6" title="home">home</a></li>

<div id="content">

<h7>HappyDays</h7><br /><br />
<h4>Made in Photo</h4><br /><br />
<h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor mattis ornare. Ut semper sem nec justo adipiscing ullamcorper. Nullam sit amet lacus et arcu vestibulum volutpat. Cras mi lectus, consequat quis pretium eu, sodales vitae velit. Donec imperdiet quis urna at egestas. Curabitur in libero commodo est hendrerit condimentum. In hac habitasse platea dictumst. Ut posuere, purus nec convallis lobortis, neque est ornare felis, ut iaculis nulla erat sed diam. Cras non leo libero.</p></h4><br /><br />  

<a rel="prettyPhoto" href="images/cocktail.jpg"><img src="images/images/cocktail.jpg" style="width: 50%; float: left;"></a>


<div class="sidebar">
                <li><a href="portfolio.html" accesskey="3"><img src="images/icon_triangle_all.jpg" width="80%"><br /><br /><h6>All</h6></a></li>
                <li><a href="#" accesskey="4" title="portfolio"><img src="images/icon_triangle_previous.jpg"  width="30%"><br /><br /><h6>Previous</h6></a></li>
                <li><a href="#" accesskey="5"><img src="images/icon_triangle_next.jpg"  width="50%"><br /><br /><h6>Next</h6></a></li>
<div class="line2"></div>


    height: 50px;
    padding: 0 13em;
    position: fixed;
    top: 0.5%;
    width: 50%;

        bottom: auto !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0;
        border-bottom: 1px solid #a7a7a7;

 #content {
    background: none repeat scroll 0 0 #FFFFFF;
   position: relative;  
    font-size: 14px;
    line-height: 25px;
    text-align: center;
     width: 66.667%;


    width: 50%;


    .sidebar li {

    display: inline-block;
    list-style-type: none;
     -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;


Solution :

I'm one of the devs from the site you linked to, Fixate.

Currently, some implementation of jQuery will be the best choice. This is a tricky problem to solve - you need a good understanding of both JS and CSS layout fundamentals.

There is a position: sticky; property which will allow you to do this once all browsers support it. Filament group have a polyfill which may be useful, although I'm not sure how well it behaves on responsive items.

Until then, you'll have to go with one of the following:

1. Hard-code values in your js, as @manu showed.

2. Use a dynamic approach with a plugin.

jQuery stickToTop (shameless plug)

We built a jQuery plugin, jQuery sticktotop, which solves the problem without you having to know the scroll height.

As an example, include it after jQuery, and then initialise stickToTop in your main js file, or in a script tag on your page:

// make the element with the class .js-sticky-menu sticky if window is > 480px
$('.js-sticky-menu').stickToTop({minWindowWidth: 480);


jQuery Pin

On our site, we used a plugin called jquery pin, as there were a few issues with our plugin at the time. Some of those issues have been cleared up.

One of the advantages of our plugin is that it performs better under resizing (as long as you're not attempting to make a floated div sticky - if you're targeting a float, rather target a div inside the float instead - see here). Elements will dynamically resize while sticking.

Jquery pin, on the other hand, will allow you to set a bottom bound dynamically for the sticky element's container.

    CSS Howto..

    how to align button radio in css

    How to convert Xpath to CSS

    How do I obtain a floating element's left offset while it is outside the viewport?

    How do I provide navigation options on the sides of a centered logo?

    How to change the css of a text input using jquery?

    How to move a carousel item to the middle when it's clicked in jquery

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to not lose the css while appending html to an element?

    How to convert CSS class to id?

    how to add style to form under echo statement by css [closed]

    How to read all numeric values from within a file in php?

    How to prevent mouseenter event action with jQuery

    How to create an image tag cloud

    How to put a table inside an inline-block element where cells have a percentage width

    How to put text in the center of box while using border-box in CSS?

    Show or hide button text responsively in jQuery Mobile

    CSS: How to position divs 2 by 2

    How to handle an id tag with '.' in CSS

    how to make keyframe animations in chrome

    jQuery: How to change the size of a css block?

    how to use liveview in dreamweaver cs5 and local xampp server

    Show missing CSS in Google Chrome

    How to hide a column in a DataGrid?

    How do I replicate this website in terms of responsiveness using only css?

    How do you name these tags in CSS? [closed]

    In CSS, how to make the window non-scrollable when an element overflows?

    How to override HTML with CSS

    how do i set the text that my json file is printing to screen i want to hide the text

    How to make a scrollable div inside of a div with a specific height

    How to alter hover effects for image button and embedded text?