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

Question

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: http://imagizer.imageshack.us/a/img841/5807/pjpj.png

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

<div id="navbar">


        <div id="menu">
            <ul><h2>
                <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>
                </h2>
            </ul>
        </div>
        </div>
    </div>

<div id="content">

<h7>HappyDays</h7><br /><br />
<h5>Webdesign</h5>
<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>



<div class="sidebar">
            <ul>
                <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>
            </ul>
<div class="line2"></div>
 </div>   

NOW THE CSS!

#menu
    {
    height: 50px;
    padding: 0 13em;
    position: fixed;
    top: 0.5%;
    width: 50%;
    word-spacing:30px;
    z-index:999;
    }




#navbar 
    {
        background:#fff;
        height:5%;
        width:100%;
        bottom: auto !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0;
        border-bottom: 1px solid #a7a7a7;
        z-index:999;

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

 }

.sidebar    
    {
    float:right;
    position:relative;
    width: 50%;
    z-index:999;    
    text-decoration:none;


    }

    .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;

    }

Answer 1

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);

LIVE DEMO

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.

Answer 2

Here is a simple script which you could use to recreate the sidebar example you showed.

As a start up to help you, this should be enough.

JSFIDDLE DEMO

script:

 $(document).ready(function() {
 $(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
    if ( scrollVal > 150) {
        $('#subnav').css({'position':'fixed','top' :'0px'});
    } else {
        $('#subnav').css({'position':'static','top':'auto'});
    }
});
});

Hope this helps

Answer 3

Something like this?

I used Waypoints sticky elements which works quite well.