Approch #2 for How to make an element sticky when it is scrolled to the top

by jasonkylefrank

HTML

<div id="top" 
     style="width:100%; height:100px; background:#ccc; margin:0;">
   Top Panel
</div>

<div id="stickyBar" class="barToBecomeSticky clearfix">
   Sticky Panel
    <span id="ExpandButton">Expand / Contract</span> 
    <span id="SearchOptions" style="display: none;">
        <span>
            <label><input type="checkbox"/>Checkbox 1</label>
        </span>
        <span>
            <label><input type="checkbox" />Checkbox 2</label>
        </span>
    </span> 
</div>

<div id="content" 
     style="width: 100%; height: 1000px; background: #ccc; margin: 0;">
   Content Panel
   
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
         
    This panel will not jump when the sticky panel becomes stuck.
    <br/><br/>
    <div>a</div><div>b</div><div>c</div><div>d</div><div>e</div>
    <div>f</div><div>g</div><div>h</div>
</div>

CSS

/* Need this selector to have higher precedence
   (for now, until I can add these properties via JS. */
div.stickToTop { 
    position:fixed; top:0;
    /* --- These settings make the element 
           mimic a "width:100%" behavior.
       --- */
    /* TODO: use JS to set these b/c
       they may need to be whatever the          
       parent's margin is (and maybe 
       padding too)*/
    margin-left:8px;
    margin-right:8px;
    /* It seems that we need to include the
       left:0 and right:0 for the margin values
       to have any effect. Also, since this element
       is now fixed, positive left/right values 
       don't have any effect (need margin for that).*/
    left: 0px; right: 0px;
    width: auto;
}

.barToBecomeSticky {
    color: white;
    margin: 45px 0px 45px 0px;
    /* These values test whether or not the made-sticky
       version can mimic the layout placement */
    margin-left: 12px; margin-right:12px;
    padding: 3px;
    /*height: 41px;*/
    background: green;

    /* Need this box-sizing to ensure
       that non-zero padding and 
       width:100% can be used without 
       causing the the box's size to 
       extend beyond the visible area.
       See: http://stackoverflow.com/a/5219768/718325 */
    /*
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;    */
    border: 5px solid #55aa55;
}

#ExpandButton {
    font-size: 12px;
    border: 1px solid #aaa;
    background: #005500;
    color: #ccc;
    float: right;
    margin: 3px; 
    padding-left: 3px; padding-right: 3px;
    cursor: pointer;
}
#SearchOptions {
    display: block;
    font-size: 12px;
    margin-top: 10px;
}
#SearchOptions span { display: block; }

/* Fixes problem of floated elements expanding out of non-floated parent elements. Apply class='clearfix' to the parent container element. See: http://stackoverflow.com/a/11597829/718325 */
.clearfix:after 
{ 
   content: " ";
   display: block; 
  ...

JavaScript

function stickToTopWhenScrolledToTop(id) {
    
    // TODO: Add the ability for the helper element to dynamically
    //  change its height when the sticky element changes its height.
    //  This will prevent any jumping when the sticky element becomes
    //  unsticky again if the sticky element changed its height during
    //  its sticky state.
    //  Perhaps something like: http://stackoverflow.com/a/16654445/718325
    
    // Cache selectors outside the scroll callback for performance. 
    var $elementToStick = $(id);
    var $w = $(window);
    // Generate and insert the helper element
    $('<div/>').insertBefore(id);
    var $helper = $elementToStick.prev();
    
    $elementToStick[0].NonStickyMarginTop = 
                        $elementToStick.css("margin-top");
    $elementToStick[0].IsElementSticky = false;
    
    function stickyRelocate() {
        
      var windowTop = $w.scrollTop();
      var helperTop = $helper.offset().top;      
      var nonStickyMarginTopInteger = 
                    parseInt($elementToStick[0].NonStickyMarginTop);
      var isScrolledPassedTop = windowTop > (helperTop + nonStickyMarginTopInteger);
        
      if (isScrolledPassedTop) {
        // Only run "make sticky" code if it is not already been made sticky
        if(!$elementToStick[0].IsElementSticky) {
            // Manage the position of the underneath 
            // remaining content to keep it from jumping up into
            // the gap left by the sticky element that is about to be 
            // been pulled out of the layout flow.
            $helper.height($elementToStick.outerHeight(true));                                                                                                
            
            cacheAndSetNonGenericStickyCSS();   
            // Apply generic "sticky top" CSS which does not need to be cached.
            addStickToTopCSS();                        
            // TEMP: show a visual effect to indicate when the...