CodePen

HTML

            
              <!-- For http://css-tricks.com/forums/discussion/23959/how-to-control-position-of-div -->
<header>
  <h1>Floating social menu</h1>
</header>
<div class="main">
  <div class="social">
  </div>
  <p>Lorem ipsim bla bla bla...</p>
</div>
<footer>
  
</footer>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              header, .main, footer {
  width: 50em;
  padding: 1.5em 2.5em;
  margin: 0 auto;
  box-sizing: border-box;
}
header, footer {
  height: 8em;
  background: #333;
  color: #fff;
}
.main {
  position: relative;
  height: 100em;
  color: #333;
}
.social {
  position: absolute;
  top: 1.5em;
  width: 5em;
  height: 12em;
  margin-left: -10em;
  background: #a7cd80;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  var $window = $(window),
      main   = $('.main'),
      social = $('.social');

  function floatSocialMenu() {
    if ($window.scrollTop() > main.position().top)
      social.css('position', 'fixed');
    else
      social.css('position', 'absolute');
  }

  $(window).resize(floatSocialMenu);
  $(window).scroll(floatSocialMenu);
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................