Question

I’m trying to create a social media panel that sits next to the title of a blog post (about 200px or so from the top of the viewport) and when the user scrolls down the page I want the panel to have a fixed position only when the top of the social panel hits the top of the viewport. An example of what I’m trying to do is any post on Mashable’s website, for instance: http://mashable.com/2011/12/05/facetones/. Notice how the social media panel on the left of the content panel scrolls with the page until it hits the top of the browser viewport, and then it becomes fixed. Any tutorial explaining how to do this with pure CSS or (better yet) jQuery would be greatly helpful, as I was not able to find anything myself. I guess I just didn’t even know how to start searching for such a thing.

Currently I have figured out how to setup my HTML/CSS to display the social media panel fixed to the page beside the content panel and it works perfectly, but I’d like for it to scroll up with the page and THEN become fixed when it hits the top of the viewport as mentioned above, instead of staying fixed exactly to the page without scrolling at all as my code currently does. Here’s my code so far:

HTML:

<div id="fixed">

    <div id="sharebox-wrapper">

        <div id="sharebox">

            <div class="inner">

                share

            </div>

        </div>

    </div>

</div>

CSS:

#fixed {position:fixed;}
#sharebox-wrapper {position:relative;left:0px;top:0px;}
#sharebox {width:100px;background:#F3F3F3 url(images/sharebox-bg.png) repeat-y right 0px;border:1px solid #CFCFCF;border-right:0px;position:absolute;left:-116px;top:25px;height:400px;}
#sharebox .inner {padding:12px;}

Answer 1

It is really pretty simple. Create a class that describes the fixed positioning. Monitor the scroll event of the window. If the top of the social media are going to go off screen, switch it to fixed. If not, let it position itself normally. I just wrote this, but it should work.

http://jsfiddle.net/zpErD/1/

var mediaTop = $('div#sharebox-wrapper').offset().top; 
var media = $('div#sharebox-wrapper');

$(document).scroll( function() {
   var scrollTop = $(document).scrollTop();

   //fix/unfix as necessary
   if (mediaTop < scrollTop) {
       $(media).addClass('fixed'); 
   }
   else { 
       $(media).removeClass('fixed'); 
   }
});