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

    }


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

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.


    CSS Howto..

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    How to add spacing between two rows of multiple divs each

    How to update element.styles css

    How to get H1 content the same height in Firefox and in IE8?

    Jquery Dropdownlist not shows the selected item.?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    how to style in css: product…(price)?

    how to accomplish this border effect in css?

    How to center CSS-shapes within a wrapper in a row

    How to create a template for randomising pictures and quotes without correspondence?

    How can I include conversion from LESS to CSS in my ANT build file without including an extra Rhino .jar?

    How to Skew divs with css

    How can I increase space just above the footer line?

    How to make the div at the screen center not lower right corner?

    How to change the focus state in CSS to just affect the keyboard and not mouse clicks

    How To Place Buttons Around A Circle with HTML5 and CSS 3?

    How to Position an Element Absolute from Center - CSS

    How to style for only non-touch devices in css?

    How to use a full width image as border between content and footer

    How do I specify a css selector which matches exactly one of multiple values?

    How to expand link on hoover? Add “<” “>” symbols around link?

    How can I make a background image of a site start off fitting to screen and then zoomable?

    SCSS, Compass and GULP: How to minify without breaking CSS?

    How to disable CSS editor in Netbeans 7

    how can I combine button with input?

    How do I specify IE 11 specific css file?

    How do I make my links appear as images, and have them change with hover and so on?

    How to Overlay a Transparent Navbar Over a Fullscreen Jumbotron

    How to style this form using CSS?

    How to get CSS of element (% vs px)