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 match columns in a scrolling table with fixed headers

    How to layout ASP.Net RadioButtons with Images?

    how to exclude tags of certain types using LESS css

    How to hide and retrieve a URL in CSS with Javascript

    How to add css only to options page of a plugin in wordpress?

    How to write css for that?

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?

    How to set css for first div, if there's no second div

    How to solve placeholder CSS difference across different browsers?

    How do I get the height to the full page height?

    How to make a layout scale with CSS?

    How to use horizontal scroll when you have way many columns

    How to make flexbox grid images responsive

    How can I get images floated to the left of other definition list elements?

    How to display child elements of
  • at 100% height?
  • css: how to position a X sign at the top right corner of the img element

    Flex: How to embed fonts with CSS

    How to keep pure-HTML-&-CSS collapsible panels open when another one is opened?

    jQuery hide() and show() not working as expected

    How to define a Click handler function for multiple elements at the same time

    How to style a form action [closed]

    How can I center my

    when there is an next to it?

    CSS three inline elements with align from left to right, how to occupy all available width

    How to restore WordPress theme style,css from caches on internet

    How do I add an image directly below a text header?

    How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

    How to assign a class or ID to a table within a JavaScript function?

    How to change the size of an image inside a div without changing the div size

    How to set fixed auto width in tab-content bootstrap?

    Vimeo videos not showing up in ShadowBox