how to have this floating icon come down and stay sticky

Question

I'm trying to do this icons scroll down and after some pixels stay fixed. I have managed to do the header fixed after scroll but don't know how to do this part. Like how yahoo have this on tumbler http://yahoo.tumblr.com/ See the top right hand side

any suggestions?

this is my fiddle http://jsfiddle.net/cancerian73/5525K/

#scroller 
{
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}

Answer 1

Here:

$(function() {

  var scroller = $('#scroller'),
      sidebar  = $('#sidebar'),
      iconBar  = $('header ul'),
      distance = $('header').outerHeight() - scroller.outerHeight(),
      pos      = $('#positioner');

  $(window).scroll(function() {

    if($(this).scrollTop() >= 0) {
       $('body').stop().animate({ top: - pos.offset().top / 3 + 'px' }, 200, 'linear');
    }
    if($(this).scrollTop() > distance && scroller.hasClass('default')) {
        scroller.removeClass('default').addClass('fixed');
        sidebar.css({ position: 'fixed', marginLeft: '0', top: '80px' });
        iconBar.animate({ top: '90px' }, 300);
    } 
    else if($(this).scrollTop() < distance && scroller.hasClass('fixed')) {
        scroller.removeClass('fixed').addClass('default');
        sidebar.css({ position: 'relative', top: '0'});
        iconBar.animate({ top: '5px' }, 300);
    }

  });

});

body {
    background: #eee;
    position: relative;
    height: 3000px;
    margin: 0;
    padding: 0;
    top: 0;
}
ul {
    list-style: none;
}
header {
    background: #3f008f;
    height: 250px;
}
header ul  {
    position: fixed;
    top: 5px;
    right: 5px;
}
header ul li {
    background: #777;
    display: inline-block;
    width: 100px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
}
#scroller {
    background: #ccc;
    top: 0;
    width: 100%;
    height: 80px;
}
.default {
    position: relative;
}
.fixed {
    position: fixed;
}
#positioner {
    position: fixed;
    display: block;
    top: 0;
}
#wrapper {
    width: 960px;
    min-height: 800px;
    margin: 0 auto;
}
#main {
    background: #fff;
    float: right;
    width: 79%;
    min-height: 3000px;
    padding: 10px;
}
#sidebar {
    float: left;
    width: 180px;
    min-height: 800px;
}
#sidebar ul {
    padding-top: 15px;
}
#sidebar ul li {
    display: inline-block;
    width: 100%;
    padding: 0 0 7px 0;
    margin-bottom: 5px;
    text-align: right;
    font: bold 12px/12px Verdana, Geneva, sans-serif;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    transition: color 0.2s ease-in;
}
li:hover {
    color: #666;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="positioner"></span>

<header>
  <ul>
    <li>Icon 1</li>
    <li>Icon 2</li>
  </ul>
</header>

<div id="scroller" class="default"></div>

<div id="wrapper">
    
  <div id="main">
    <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque orci risus, vehicula eu bibendum eu, eleifend quis augue. Mauris vel euismod est. Proin aliquet interdum purus, ut vestibulum metus eleifend a. Nulla gravida tortor eget libero pellentesque ornare. Sed viverra fringilla tempor. Fusce eu ipsum odio. Donec vestibulum leo sit amet metus accumsan malesuada. Nunc in tellus dapibus, pulvinar ante quis, imperdiet odio. Morbi quam ante, molestie id nisl eu, bibendum aliquet ante. Nullam sed malesuada est. Maecenas est eros, fermentum tempus massa ac, euismod interdum sem. Ut sit amet lobortis ipsum. Mauris egestas tristique mauris, at fringilla lorem fermentum id. Quisque imperdiet nisl nec enim tincidunt, at semper nisl varius. Integer vulputate, risus at ullamcorper vehicula, tellus lorem sodales est, ac feugiat elit turpis adipiscing ipsum.

Vivamus blandit lacinia ipsum, nec tristique velit. Proin quis commodo enim. Aliquam sit amet diam quis lacus consequat pulvinar. Fusce ac diam sit amet lorem feugiat semper. Proin et porta sapien, id accumsan dolor. Proin quis ornare justo. Morbi enim dui, congue eget mauris quis, auctor malesuada dolor. Vivamus iaculis lacus quis dapibus blandit. Pellentesque ultricies imperdiet velit, id hendrerit lacus vestibulum sed. Sed elementum, justo pharetra porttitor auctor, odio magna semper justo, eget volutpat dolor risus in lectus. Aenean sollicitudin tincidunt posuere. Vivamus lorem diam, feugiat sit amet purus nec, ullamcorper pulvinar nisl. Phasellus id leo et velit pharetra mattis. Aenean a laoreet augue, sed gravida leo. Proin accumsan massa nisl, sit amet congue lorem sodales non.

Etiam velit lorem, luctus at orci quis, sollicitudin hendrerit quam. Sed vitae odio interdum, iaculis erat ut, eleifend sapien. Aliquam ornare tincidunt lorem, non blandit dolor rutrum at. Maecenas consequat sit amet mi et porta. Integer ut diam id nunc consequat venenatis ut non elit. Donec id dolor ut quam bibendum bibendum. In hac habitasse platea dictumst. Fusce viverra, magna in blandit accumsan, purus libero placerat nulla, eget dignissim ligula tortor eu eros. Morbi at laoreet elit, sed vehicula dui. Phasellus et velit neque. Mauris dictum felis id elit molestie, eget fringilla velit faucibus. Sed non mi faucibus leo venenatis pulvinar sed ut lorem. Aenean ultrices vulputate ipsum eu lobortis. Vestibulum vitae ante eget diam mollis bibendum in eget est. Aliquam a vulputate elit, et tincidunt dolor. Sed tortor quam, pharetra ut leo quis, venenatis ornare tortor.

Sed euismod mauris felis, vel rutrum arcu congue nec. Curabitur ante arcu, hendrerit et magna mollis, consequat dapibus dui. Phasellus ut condimentum nisl. Suspendisse ut luctus libero, a gravida ligula. Nullam non convallis massa, ac facilisis neque. Proin libero magna, convallis non diam auctor, vestibulum elementum massa. Nulla facilisi. Curabitur hendrerit commodo iaculis. Donec pellentesque metus ut sagittis consequat.

Vestibulum tristique lobortis orci at imperdiet. Nullam at tellus nec sapien ultricies placerat a et orci. Cras porttitor iaculis velit a posuere. Mauris rhoncus mi lectus, a dictum dolor venenatis ut. Integer dapibus, massa nec feugiat varius, lectus sem laoreet sem, sed adipiscing justo ipsum vel eros. Sed non mi est. Donec fringilla mollis lectus, at convallis mi iaculis ut. Maecenas eu leo non sapien viverra hendrerit. Cras id lacus quis neque commodo porta. Nunc non mi at diam pulvinar convallis...
    </p>
  </div>


  <div id="sidebar">

    <ul>
      <li>Icon 1</li>
      <li>Icon 2</li>
      <li>Icon 3</li>
      <li>Icon 4</li>
      <li>Icon 5</li>
      <li>Icon 6</li>
      <li>Icon 7</li>
      <li>Icon 8</li>
      <li>Icon 9</li>
    </ul>
    
  </div>
    
    
    </div>

Answer 2

EDIT: You can try to style the icons with fixed positioning. Here is an example how this could be done:

var menu = $('.navbar');
var origOffsetY = menu.offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > origOffsetY) {
        $('#wrapper').addClass('sticky');
    } else {
        $('#wrapper').removeClass('sticky');
    }    
});

I also changed the styles for the elements below:

.top-icon-box {
    margin:3px 0 0 0;
    width:157px;
    height:25px;
    background-color:#ccc;
    position:fixed;
    top:5px;
    right:20px;
    transition: all 0.2s linear;
}
....
.sticky .navbar {
    position:fixed;
    top:0;
}
.sticky .top-icon-box {
    top:100px;
}

Now the code looks more simplified. The only thing that is done is to change the class for the wrapper element. Here is a link with the code: http://jsfiddle.net/47tMu/