Stick div to top of parent element

Question

The reason this is happening is that as soon as you give position: fixed to your #sticky element, it takes it out of the document flow. This means that all of your div.child elements shift up, which makes the height of your container element get smaller. Because the container element height gets smaller, the container element no longer needs to scroll, which means its scrollbar disappears and its scroll position is reset to 0. When its scroll position is reset to 0, the script again removes the stick class from your #sticky element and we are back where we started, but with the container element scrolled all the way to the top.

In summary:

#sticky element gets .stick class.
#sticky element is removed from document flow, child elements shift up, container element height decreases and scrollbar disappears. Container’s scrollTop is reset to 0.
Script fires again, removing the .stick class from #sticky, and the container’s scrollTop remains at 0 (thus the container div is scrolled back up to the top).

Below is a solution that uses position: absolute for the #sticky element, and when the #sticky element gets the stick class, it gives the #sticky-anchor element a height equal to the height of the #sticky element to prevent the child divs from shifting upwards.

Working Live Demo:

function sticky_relocate() {
    var window_top = $('#container').scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    $('.stick').css('width', $('#sticky').next().css('width'));
    if (window_top > div_top) {
        $('#sticky-anchor').height($("#sticky").outerHeight());
        $('#sticky').addClass('stick');
        $("#sticky").css("top", (window_top) + "px");
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function () {
    $('#container').scroll(sticky_relocate);
    sticky_relocate();
});

.child {
    height: 200px;
    background: gray;
}

#sticky {
    padding: 0.5ex;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
}
#sticky.stick {
    position: absolute;
    top: 0;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
}
body {
    margin: 1em;
}
p {
    margin: 1em auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>

<div id="container" style="overflow-y: auto; height: 800px; position: relative;">
  <div id="sticky-anchor"></div>
  <div id="sticky">This will stay at top of page</div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

JSFiddle Version: http://jsfiddle.net/HV9HM/2883/

As a side note, the reason it was working fine in your second example is that the additional child element made it so that even when your #sticky element was removed from document flow and the container element’s height was reduced, the height of the container element was still large enough to keep the scrollbar from jumping/disappearing and changing/resetting your scrollTop.

Leave a Comment Cancel reply