A number of websites have a feature, where an element appears fixed on the page as you scroll UNTIL you hit a certain point, like the end of a side bar, and then it anchors to the bottom of that sidebar. Once you scroll back up, it begins to act like a fixed element, remaining on your screen as you scroll.

What do you call this and how is it done?

A number of websites have a feature, where an element appears fixed on the page as you scroll UNTIL you hit a certain point, like the end of a side bar, and then it anchors to the bottom of that sidebar. Once you scroll back up, it begins to act like a fixed element, remaining on your screen as you scroll.

What do you call this and how is it done?

• javascript
• html
• css

3 Answers 3

You can set position to absolute and attached scroll event to the page and in that event you change top css value based on position of scrollbar (in jQuery it's scrollTop in pure javascript it should be similar), and then you add condition that top is changed only if scrollTop is less then specific value like offset.top + height of the sidebar.

You can use https://github./wduffy/jScroll but I know that's not exactly what you're looking for, there's a delay between scrolling and the div ing into view, it constantly has to play catch-up.

the root of the code is jQuery's .scroll() handler, so it's a good starting point. As far as I know there isn't an official name for this effect, but I've seen it described so many places, now that somebody wants to know about it I can't freakin' find it!

EDIT Here's what I was looking for: Persistent Headers on CSS-Tricks

the basics of Chris Coyier's technique are html:

<article class="persist-area">
   <h1 class="persist-header">
   <!-- stuff and stuff -->
</article>

css:

.floatingHeader {
  position: fixed;
  top: 0;
  visibility: hidden;
}

and jQuery:

 function UpdateTableHeaders() {
   $(".persist-area").each(function() {

       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "visibility": "visible"
           });
       } else {
           floatingHeader.css({
            "visibility": "hidden"
           });
       };
   });
}

// DOM Ready
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");

   });

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});   

Listen to the scroll event, when they scroll past the element you want to remain in view you change that elements it's position to 'fixed'.

I created a jsFiddle illustrating this: http://jsfiddle/luisperezphd/EcsS6/

There are a couple of things to keep in mind for example a fixed element will be place relative to the window or the first parent with a position: relative.

Secondly when you change an element to fixed it collapses the space it used to be in causing the content below it shift up. If you want the effect to appear smooth you have to put something in it's place that takes up the same amount of space that it did.

In my jsFiddle example I acplished this by wrapping the header element inside another element and then setting it's height to match (programatically). There are though several different ways you could have acplished this.

I'm also going to include the code below, in my example I use jQuery.

JavaScript:

var $header = $("#header");
var HeaderOffset = $header.position().top;
$("#headerContainer").css({ height: $header.height() });

$("#container").scroll(function() {
    if($(this).scrollTop() > HeaderOffset) {
        $header.addClass("fixedTop");
    } else {
        $header.removeClass("fixedTop");
    }
});

CSS:

#containerParent {
    position: relative;
    width: 180px;
}

#container {
    height:200px;
    overflow:auto;
}

#header {
    background:black;
    color:white;
    width: 100%;
}

.fixedTop {
    position: absolute;
    top: 0;
}

Sample HTML:

<h1>Fixed Position Header - after a point</h1>
<div id="containerParent">
    <div id="container">
        This text is an example of content that might occur before the header.
        <div id="headerContainer">
            <div id="header">Header</div>
        </div>
        <div>
            Below is enough content to trigger scrolling.
            line 1 <br/>
            line 2 <br/>
            line 3 <br/>
            line 4 <br/>
            line 5 <br/>
            line 6 <br/>
            line 7 <br/>
            line 8 <br/>
            line 9 <br/>
            line 10 <br/>
            line 11 <br/>
            line 12 <br/>
            line 13 <br/>
            line 14 <br/>
            line 15 <br/>
        </div>
    </div>
</div>